I'm trying to get several inline
and inline-block
components aligned vertically in a div
. How come the span
in this example insists on being pushed down? I've tried both vertical-align:middle;
and vertical-align:top;
, but nothing changes.
HTML:
<div>
<a></a><a></a>
<span>Some text</span>
</div>?
CSS:
a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
}
div {
background:yellow;
vertical-align:middle;
}
span {
background:red;
}
?
RESULT:
This question is related to
html
css
vertical-alignment
Give vertical-align:top;
in a
& span
. Like this:
a, span{
vertical-align:top;
}
Check this http://jsfiddle.net/TFPx8/10/
For fine tuning the position of an inline-block
item, use top and left:
position: relative;
top: 5px;
left: 5px;
Thanks CSS-Tricks!
Simply floating both elements left achieves the same result.
div {
background:yellow;
vertical-align:middle;
margin:10px;
}
a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}
span {
background:red;
display:inline-block;
float:left;
}
Source: Stackoverflow.com