Is there any way to center elements that use text-align: left and doesn't involve display: inline-block?
I'm creating an epub and when centering the paragraphs through div and inline-block it breaks the page layout (see links with example).
HTML
<h2 class="numero_hino"></h2>
<h3 class="titulo_hino sigil_not_in_toc"></h3>
<div class="centralizar-div">
<div class="estrofe-div">
<p class="estrofe"></p>
<p class="estrofe"></p>
<p class="estrofe"></p>
</div>
</div>
CSS
div.centralizar-div {
text-align: center;
}
div.estrofe-div {
display: inline-block;
text-align: left;
}
How it should be:
Book in continuous mode (scroll down)
How it is:
Book in single page mode
If anyone can help me :D
try change .estrofe-div p { display: inline-block; text-align : center }
Please try the below css
div.estrofe-div {
display: flex;
align-items: center;
justify-content: center;
}
Since your are using inline-block on your divs as way to position your content, we keep it the same and add an extra css targeting only the tags.
div.centralizar-div {
text-align: center;
}
div.estrofe-div {
display: inline-block;
text-align: center;
}
div.estrofe-div p {
text-align: left;
}
Because of people's comments, I was researching until I found a way to solve the problem through flex items.
Follow the code
div.centralizar-div {
display: flex;
flex-flow: column wrap;
align-items: center;
}
Related
I want to write these two addresses in my heading, I tried this code but "/" doesn't place in the same line. could anyone help me fix it?
<header>
<nav class="header">
<h1>CRIS</h1>
<p class="light_grey">Art direction design</p>
<div class="address">
<address>Call me (+706)098-0751</address>
<p>/</p>
<address>cris#gmail.com</address>
</div>
<p>Menu</p>
</nav>
</header>
and this is css code :
.header {
justify-content: space-around;
display: flex;
}
.address {
display: flex;
justify-content: space-around;
}
You need to add align-items: center to it:
.address {
display: flex;
justify-content: space-around;
align-items: center;
}
<div class="address">
<address>Call me (+706)098-0751</address>
<p>/</p>
<address>cris#gmail.com</address>
</div>
Because by default, <p> tag has some vertical margins applied it, you could also set .address p { margin: 0; } to get rid of it.
There are several solutions to your problem. For example, here are two of the many:
This is #Hao Wu answer, using align-items: center. <--- Better use this solution.
This is to use margin rules, like this:
.address address,
.address p {
margin-top: auto;
margin-bottom: auto;
}
I am trying to align my images with the text so its in the middle in a line.
<div id="bar">
<h2><img src="images/java.png" alt="logo">Java<img src="images/c++.png" alt="logo">C/C++<img src="images/unity.png" alt="logo">Unity<img src="images/sql.png" alt="logo">SQL<img src="images/html.png" alt="logo">HTML<img src="images/css.png" alt="logo">CSS<img src="images/python.png" alt="logo">Python</h2>
</div>
#bar h2{
vertical-align: middle;
}
But still looks like this
Try to use flexible box model:
#bar h2 {
display: flex;
flex-diretion:row;
justify-content: center;
align-items:center;
}
but is a better idea to put that inside a div and then create a css class for that:
.languages-bar {
display: flex;
flex-diretion:row;
justify-content: center;
align-items:center;
}
I am having this simple issue here, which worked before at a lot of places.
I am trying to align items inside a div vertically and at the center. Here in this code the margin-left works, but the margin top doesn't, I tried changing it to bigger values, still no effect at all.
.footer {
background-color: #2E7FB6;
color:white;
height:50px;
}
<div class="footer">
<section style="margin-left:15px; margin-top:10px;">FETCHED: {{ recordsFetched }} Work Order(s)</section>
</div>
Remove the inline styling, use flexbox with flex-direction: column; justify-content: center; and text-align center; on the footer.
.footer {
background-color: #2E7FB6;
color:white;
height:50px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="footer">
<section>FETCHED: {{ recordsFetched }} Work Order(s)</section>
</div>
Use flexbox tips just #rprm192 say. But if you want to make it more simple and support older browser, you can use line-height. Here's code for you
.footer {
height: 50px;
}
.footer section {
height: 100%;
line-height: 50px; //make it same as height value
}
Pre History
I am building html form, with elements having multiple options ...., but instead of showing it as dropdown, i would like to show them as buttons without using any js, I removed buttons with label pointing to input checkbox.
Problem
I need label (or anchor or div) tag behave exactly like button tag without any extra wrapper tags, I googled all variation doesn't provide same result as native tag button.
<button class="button">
Text
<div>Small Text</div>
</button>
Solutions not work
line-height, padding does not provide same functionality, because button height/width and text length may vary. I tried special webkit style -webkit-appearance: button; no changes.
Mustery Flex
I tried flex
.button {
flex-wrap: wrap;
align-items: center;
justify-content: center;
display: inline-flex;
}
<div class="button">
Text
<div>Small Text</div>
</div>
but child div inside button not breaking/warping to new line.
p.s Environment tested, Google Chrome, Safari
I found solution using flex with flex-direction: column; so text and div treats like column items, here is code
label.button {
flex-direction: column;
justify-content: center; /* <-- actual veertical align */
display: inline-flex;
text-align:center;
}
JS Fiddle Demo
Does this does the job ?
div.button {
align-items: center;
text-align: center;
display: inline-block;
border: 1px solid black;
}
div.button div {
clear: both;
}
<div class="button">
Text
<div>Small Text</div>
</div>
Ghost element trick looks work well.
.wrap {
text-align: center;
background: #ededed;
margin: 20px;
}
.wrap:before {
content: '\200B';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered-guy {
display: inline-block;
vertical-align: middle;
width: 300px;
padding: 10px 15px;
border: #777 dotted 2px;
background: #666;
color: #fff;
}
<div class="wrap" style="height: 512px;">
<div class="centered-guy">
<h1>Some text</h1>
<p>Bool!<br>Look at me, mama!</p>
</div>
</div>
I know this should be fairly simple, but I for the life of me can't figure out the proper CSS to do this.
HTML
<h1>A Cool Header <button>Click Me</button></h1>
CSS
button{position:relative; top:50%;}
My attempt can be found Here
Any help is appreciated.
add vertical-align: middle; for button
remove position:relative; top:50%;
h1 {background-color:green}
button{
vertical-align: middle;
}
<h1>A Cool Header <button>Click Me</button></h1>
use "vertical-align: middle"
button{ display: inline-block;
vertical-align: middle;}
Use a flex box
header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
align-self: center;
}
see it running on my site's header
http://kezzi.co