I have used three div's with css styling as display inline block with some specific width and height. The Div which as some text is pushing down. Can anybody tell me what could be the reason ? below is the code
Html:
<div></div>
<div>why this pushed down?</div>
<div></div>
Css :
div{
display:inline-block;
width:50px;
height:150px;
padding: 5px;
background: #f00;
}
http://jsfiddle.net/P5HGJ/
Each element behaves like a block element, but it remains inline.
You can change the vertical alignment with vertical-align: middle.
.show-inline{
display:inline-block;
width:50px;
height:150px;
padding: 5px;
background: #f00;
vertical-align: middle;
}
See http://jsfiddle.net/7y7Hd/1/
Read about vertical-align at https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
This has to do with the baseline. Whenever you use an inline-block the baseline is calculated on the line-height of the font.
Because the outer <div>s don't have any font the baseline will not have the same calculation/position as the one with the font.
You can simply fix this by giving a global baseline on all the <divs>:
div{
display:inline-block;
width:50px;
height:150px;
padding: 5px;
background: #f00;
vertical-align: middle;
}
It doesn't really matter if you use top, middle, or bottom. As long as the baseline is on all the <div>s the same, it should be no problem
jsFiddle
inline-block makes the element generate a block box that’s laid out as
if it were an inline box.
inline block is placed inline (ie. on the same line as adjacent content),
but it behaves as a block.
Related
Here's my stripped-down code:
<style>
div{
height:100px;
background-color:black;
}
span{
font-size:60pt;
background-color:yellow;
}
img{
height:100px;
background-color:yellow;
}
</style>
<div>
<span>ASDF</span>
<img src="foo"/>
</div>
(fiddle: http://jsfiddle.net/pM2jE/)
How come the "ASDF" is misaligned with the rest of the DIV??
I suspect, somehow, that the bottom of the word "ASDF" is aligning with the rest of the DIV, and so the SPAN as a whole doesn't actually match up. I have no idea how to fix this.
Add this css to your image class
vertical-align: top;
By default, the vertical-align for a span is "baseline", which will align the contained text to the bottom of the parent container. Adding a:
vertical-align: top;
CSS property will align the top of the text to the top of the containing div.
use float:left or float: right in your this might help you align your span and div
I want to put text in the middle of the box in CSS3, but it's not working for some reasons.
Here's my code snippet (with code from Angularjs):
<div class="a" ng-repeat="i in l | filter:query">
<a class="b" href="{{i.a}}">{{i.b}} {{i.c}}</a>
</div>
And here's my css:
.b {
display: inline-block;
float: left;
margin: 8px;
height: 20px;
width: 100px;
}
And even if I add vertical-align: middle; to the above CSS, it doesn't put the text in the middle of the box... why?
Thanks.
You need to use css table-cell
DEMO http://jsfiddle.net/LstNS/31/
.b {
display: table-cell;
vertical-align: middle;
}
.a {
display: table;
height: 200px;
border: black thin solid;
}
vertical-align requires a lot of things to work right...
easiest method , and what I do, is just use line-height
so do
.b {
line-height: 20px;
}
adjust number of pixels accordingly, but that will center the text vertically for you
float kills display and so vertical-align if avalaibe.
inline-blocks element can be vertical-align aside text, other inline-boxes or on the line-height.
In your case , line-height alone will give height of parent (if unprecised) and set the link on it, right in the middle :), no need to give an inline-block display to <a> unless you need it to size it for instance (or whatever else style that needs layout) .
If .a has an height, give it an equal line-height.
Line-height works fine as long as you have one line of text.
if you want to use inline-block, and set middle alignement from itself it won'nt work, you need at least 2 elements as another inline-boxe, so it can center from something ... an extra box or pseudo-element might help.
.a {height:300px;}
.a:before {
content:'';
height:100%;
}
.a:before, .a a {
display:inline-block;
vertical-align:middle;
}
Else, vertical-align works on content of <td> or element wich receive a display:table-cell;. .a could then receive a display:table-cell and vertical-align and eventually an height. Usually it needs a parent as display:table to work fine.
.a {
display:table-cell;
height:200px;
vertical-align:middle;
}
I have no special links on tutorial for vertical-align , on W3C it is confusing somehow since both vertical-align for inline-box and cell content are dispatched in different documents.
I'm certain this has been asked before in some form or other, but I just can't find an answer..
I have some nested divs
<div class="parent">
<div class="child">A</div>
</div>
And the child has display:inline-block and overflow:hidden
.parent{
background-color:red;
}
.child{
background-color:green;
display:inline-block;
overflow:hidden;
}
And it gets rendered like this:
You can notice that the parent is 5px higher than the child.
Where does the extra height come from?
Here is the sample: http://jsfiddle.net/w8dfU/
Edit:
I don't want to remove display:inline-block or overflow:hidden, this is a simplified example to illustrate the problem, but in my real layout I need them both.
I just want to understand why this extra height appears. Is it specified somewhere that it should be like this? Is it a consequence of some other css feature?
I had this issue when building a horizontal slider. I fixed it with vertical-align:top on my inline-block elements.
ul {
overflow-x: scroll;
overflow-y:hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
ul&::-webkit-scrollbar {
display: none;
}
li {
display: inline-block;
vertical-align: top;
width: 75px;
padding-right: 20px;
margin:20px 0 0 0;
}
The accepted answer above is correct, but it does not give the explanation I was looking for.
A good explanation was provided by #Alohci in his comment.
Explanation in a few words:
The value for vertical-align is baseline, therefore the child div is aligned with the baseline of the text.
This text baseline is not the same as the bottom line. It's a bit higher up, to accommodate letters with descenders: p, q, g.
This is why the problem is fixed by setting vertical-align:top.
.child{
background-color:green;
display:inline-block;
overflow:hidden;
vertical-align: top;
}
This extra space coming from overflow:hidden of Child class. Remove this property and check and if your really wanted to use overflow:hidden property then use negative margin to child class . You can remove this extra space.
I have two button bars- each contains links, but one also contains a submit button of a certain height. The one with the submit button has all the elements vertically centered. I want the other button bar, without the submit button, to look the same, so I gave it an explicit height. However, the links within it align to the top instead of in the middle.
What's going on here, and how can I make link bars that are of a consistent height, with vertically centered elements?
HTML:
<div class="link-bar">
<input type="submit" value="Save"/>
link
link
</div>
<div class="link-bar">
link
link
</div>
CSS:
input[type='submit'] {
width:100px;
height:40px;
border:solid red 1px;
}
.link-bar {
height:40px;
background:#EEE;
border:blue 1px solid;
margin:10px;
vertical-align: middle;
}
See jsFiddle for example
Simply add line-height equal to the height. By default, any text on that line will be vertically centered. The exception occurs if you wrap the text to a new line.
http://www.w3.org/wiki/CSS/Properties/line-height
I also removed your vertical-align as it's superfluous to content in block level elements. It only applies to inline elements.
.link-bar {
height: 40px;
background: #EEE;
border:blue 1px solid;
margin: 10px;
}
.link-bar a {
line-height: 40px; /* equal to the height of the container */
}
DEMO:
http://jsfiddle.net/SLqbk/9/
Use the line-height property.
.link-bar a {
line-height: 40px;
}
http://jsfiddle.net/SLqbk/7/
Add this to your css
.link-bar a {line-height: 40px; }
http://jsfiddle.net/xYVRj/
I gave #Sparky672 the answer because he correctly addressed my specific question and led me on the right path, but I want to share what I ended up doing, which I think is more effective overall:
Instead of explicitly setting the line-height of .link-bar a to try to match up to the container and button heights, I just set ALL the elements in the toolbar to the same line-height, and make them display:inline-bock. While the normal caveats of using inline-block apply (See here and here), the end result is consistent sizing and vertical centering for all the elements you throw in your toolbar, with less css to manage:
.link-bar * {
line-height: 30px;
display:inline-block;
/* Keep top-bottom padding of elements zeroed for consistent heights: */
padding-top:0; padding-bottom:0;
}
See the updated fiddle.
For me, one of the most useful features of tables is that their width adjust to its content.
You can very easily do things like:
<table align=center style="border: 1px solid black">
<tr><td style="padding: 20px">
some text here
</table>
If the content of that box is wider, the box will be wider. Very intuitive and it works on ALL browsers, period.
You can achive something similar for normal block elements by using the float CSS property, i.e. their width adjust to its content. But the element will not be centered.
So, the question: How can you center a block element and make that element to adjust its width to its content in a cross-browser manner?
The modern way is to specify display:table and the workaround for IE is having a parent element and text-align:center on a inline/inline-block:
<div id="for-ie">
<div id="el">whatup son</div>
</div>
<style>
#el {
display:table;
margin:0 auto;
}
/* for IE, throw this in a CC */
#for-ie { text-align:center; }
#el {
zoom:1;
display:inline;
}
</style>
Demo
Here's a quick tutorial I wrote on this subject: http://work.arounds.org/centering-block-level-element-variable-width/
I'll lengthen it when I'm not sleepy.
Quoting CSS: The Definitive Guide by Eric Meyer
If both margins are set to auto, as shown in the code below, then they are set to equal lengths, thus centering the element within its parent:
p {width: 100px; margin-left: auto; margin-right: auto;}
Setting both margins to equal lengths is the correct way to center elements, as opposed to using text-align. (text-align applies only to the inline content of a block-level element, so setting an element to have a text-align of center shouldn't center it.)
In practice, only browsers released after February 1999 correctly handle auto margin centering, and not all of them get it completely right. Those that do not handle auto margins correctly behave in inconsistent ways, but the safest bet is to assume that outdated browsers will reset both margins to zero.
However,
One of the more pernicious bugs in IE/Win up through IE6 is that it actually does treat text-align: center as if it were the element, and centers elements as well as text. This does not happen in standards mode in IE6 and later, but it persists in IE5.x and earlier.
If your intend is to display just some text at the middle of the page, you can use something like this:
<div style="text-align:center;">
<div style="background:red;display:inline;">
Hello World!
</div>
</div>
The first block will align contents to the middle. The second will fill the height equal to its contents, since display:inline will force the <div/> block to behavior like a <span/>, ie. adjust its width to content, and not to the remaining space.
Note this is limited to single line text only (like "some text here").
Use this CSS
#content {
position: absolute;
width: 150px;
margin-left: -75px;
left: 50%;
border: 1px solid #000;
text-align: center;
padding: 20px;
}
and this html
<div id="content">
some text here
</div>
Good golly, miss Molly! These answers are really overcomplicated.
CSS:
div.centered {
width:100%;
margin:0 auto;
text-align:center;
}
div.centered span {
padding:20px;
border:1px solid #000;
}
And then use this in your body:
<div class="centered"><span>Hello world!</span></div>