I am trying to vertical align texts in my div.
I have something like
<div id='div'>
<h1>test here</h1>
</div>
#div{
float: left;
padding: 10px;
height: 180px;
width: 130px;
line-height: 180px;
text-align: center;
vertical-align: middle;
}
#div h1{
height: 180px;
line-height: 180px;
vertical-align:middle;
font:normal 0.9em proxima-reg;
}
I can't seem to vertical align the h1 tag texts inside my div. My brain is fried now and I was hoping someone can help me out. Thanks in advance.
Here is one way of doing it:
#div {
float: left;
padding: 10px;
height: 180px;
width: 130px;
line-height: 180px;
text-align: center;
background-color: yellow;
}
#div h1 {
vertical-align: middle;
font:normal 0.9em proxima-reg;
outline: 1px dotted blue;
display: inline-block;
}
See: http://jsfiddle.net/audetwebdesign/sUzK9/
Your #div has well defined dimensions, which makes things easier.
I applied display: inline-block to the h1 and removed any height/line-height values,
and it seems to work.
vertical-align is meant more for table cells than it is for "non-inline" DIV elements.
Give your DIV a fixed width and height, and then try using margin: auto 0px; to vertically align it.
Or...
Give your DIV a top and bottom padding.
Either way, you'll need to text-align your text to center.
Try this (http://jsfiddle.net/myajouri/zyB6C/):
#div{
float: left;
display: table-cell;
padding: 10px;
height: 180px;
width: 130px;
line-height: 180px;
text-align: center;
vertical-align: middle;
background-color: red;
}
#div h1{
display: inline-block;
vertical-align: middle;
font:normal 0.9em proxima-reg;
background-color: green;
}
Related
In this style of using line-height and inline-block, why is the green item a few pixels below the middle? Shouldn't there be exactly 15px above and below?
.container{
height: 45px;
line-height: 45px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 15px;
background-color: green;
vertical-align: middle;
display: inline-block
}
<div class="container">
<div class="item">
</div>
</div>
I know there are other ways of vertically aligning items (including JS, absolute positions, and many more). I'm not trying to solve the general "how to vertically align a div".
The culprit here is not so much the line-height, but rather the vertical-align: middle. It tries to align your box with the text that may hypothetically be inside the parent box. Where the inner box ends up depends on the font-size of that text. You can push the box further down by increasing the font-size of its parent:
.container{
height: 45px;
width: 100%;
line-height: 45px;
font-size: 45px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 40px;
background-color: green;
vertical-align: middle;
display: inline-block;
}
<div class="container">
job
<div class="item">
</div>
</div>
As you can see, the text is closer to the bottom of its container than to the top (the "j" overflows the container while the "b" does not).
In the same way, you can move the box closer to the center by decreasing the font-size. Since you asked in comments, here's how you get it optimally centered with this method: Set font-size to 0 on the container.
.container{
height: 45px;
width: 100%;
line-height: 45px;
font-size: 0px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 40px;
background-color: green;
vertical-align: middle;
display: inline-block;
}
<div class="container">
job
<div class="item">
</div>
</div>
Changes in your style may help you
.container {
background-color: #ff0000;
display: table-cell;
height: 45px;
vertical-align: middle;
}
.item {
background-color: #008000;
display: table-cell;
height: 15px;
vertical-align: middle;
width: 15px;
}
Please use dividable size to make this work. Also remove vertical align attribue
https://jsfiddle.net/guc6uxc7/
.container{
height: 42px;
line-height: 42px;
background-color: red;
display: inline-block
}
.item{
height: 12px;
width: 12px;
background-color: green;
display: inline-block;
}
I have two divs displayed using display: inline-block, in order to have them next to each other. This works when neither of the divs have text in them. However, when I put text in one div, it moves it down dramatically, while the other keeps the same position. This happens regardless of what div I put the text in; if I put it in both, however, only the left div will go down.
Here's a codepen to show what I mean: http://codepen.io/anon/pen/MwEKPp
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#main_container {
width: 1000px;
height: 95%;
margin: 0 auto;
font-size: 0px;
}
#logo {
display: inline-block;
height: 200px;
width: 200px;
background-color: aqua;
font-size: 20px;
}
#title_area {
display: inline-block;
font-size: 20px;
height: 200px;
width: 800px;
background-color: rgb(60,105,123);
font-family: "open sans";
font-size: 60px;
}
<div id="main_container">
<div id="logo_title_area">
<div id="logo">
test
</div>
<div id="title_area">
test
</div>
</div>
</div>
Entering text into the divs labelled logo and title_area will produce the effect I'm talking about.
Does anyone have any idea how to fix this? I need them to remain side-by-side regardless of their contents. Thanks in advance!
It's just missing the vertical alignment, the default value is baseline.
E {
display: inline-block;
vertical-align: top;
}
#logo, #title-area {
vertical-align: top;
}
I just added overflow:auto; for both of the divs and it worked
#logo {
overflow:auto;
display: inline-block;
height: 200px;
width: 200px;
background-color: aqua;
font-size: 20px;
}
#title_area {
overflow:auto;
display: inline-block;
font-size: 20px;
height: 200px;
width: 800px;
background-color: rgb(60,105,123);
font-family: "open sans";
font-size: 60px;
}
I have the following simple code snippet. It is taken out from my application where .a1 is a container button, which has an icon. The icon should be vertically middle aligned to the parents line-height/height, but it is shifted with 1px from top. Could you explain me why this is the behavior? Is there any solution?
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
Why?
Because inline-block elements render with "white-space". You can see this in this demo where no height/width is set on the parent element.
When you use vertical-align:middle; the "white space" is rendered before the element (on top) (black line in the demo). This space moves the child element down and therefore it doesn't appear verticaly centered.
how to fix :
You can use display:block; and calculate the margin to apply to the child element so it centers verticaly and horzontaly.
You can also take a look at this question which talks about white space and ways to avoid them.
Well, it seems like font-size:0; for .a1 seems also a fix for such issue.
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
font-size: 0;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00
I have the table, inside the table I have another box , I am struggling to align the box in center of the table.
My CSS code is
Inside box code
.inside_box{
border: medium solid;
display: table-cell;
float: none;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
text-align: center;
vertical-align: middle;
width: 300px;
}
Outside table CSS:
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
How to align the inside box in center?
I assume that your HTML is something like this
<div class="outer_table">
<div class="inside_box">hello world</div>
</div>
So, you are using display: table-cell; for .inside_box and margin: auto; won't work, as it's a table cell now, so what you can do is, wrap a div around hello world text, like this
Demo
<div class="outer_table">
<div class="inside_box"><div>hello world</div></div>
</div>
And use CSS like
.inside_box {
border: medium solid;
display: table;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
width: 300px;
}
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
.inside_box > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Make sure you port the text-align: center; and vertical-align: middle; properties from .inside_box to .inside_box > div selector block.
Note: You won't need float: none;, not sure why you are using that.
As I got a comment, that what if you do not want to add an extra div element, so think like that you are using td without a table tag. So there is no way for that div with display: table-cell; to respect margin: auto;.
From Mozilla Developer Network :
Try to change and make your css like this:
.outer_table td {
text-align: center; // Align center
}
.inside_box {
float: none; // if you set float left or right your box will move right there
margin: 0px auto; // this setting for balancing margin left and right
}
<table class="outer_table">
<tr><td><div class="inside_box">Hellow wolrd!</div></td></tr>
</table>
I am trying to do a vertical align middle in my case.
I have.
<section id='container'>
<div id='title'>
<h1>Title here.</h1>
</div>
</section>
I have my css like
#title{
display: inline-block;
width: 235px;
height: 94px;
position: relative;
text-align: center;
}
#left-lesson-title h1{
color:white;
line-height: 94px;
vertical-align: middle;
text-align: left;
font:normal 1.3em arial;
margin-left:15px
}
I can't seem to get h1 texts vertical aligned to middle. The h1 is aligned to top in my case. Can anyone help me about it? Thanks.
#title{
border:1px solid black;
display: table-cell;
width: 235px;
height: 94px;
vertical-align:middle;
text-align: center;
}
http://jsfiddle.net/WC6t8/
You need to set your display to table-cell then set the vertical-align as middle.
This should be on the parent container of the h1 tag.