div {
background: none repeat scroll 0 0 #008000;
display: block;
height: 50px;
vertical-align: middle;
}
How to center inline blocks together with text vertically without space at bottom?
-
26-06-2023 - |
سؤال
I want to align all elements vertically centered, and using exactly 50px of height, but somehow I have 2 problems:
- The items use more height than 50px (green color)
- The ">" text is not vertically centered
HTML
<div>
<a href="#"><ins class="logo"></ins></a>
<b>›</b>
...
</div>
CSS
div {
background:green;
}
a {
display:inline-block;
}
.logo {
display:inline-block;
height:30px;
padding:10px;
background:blue;
}
b {
line-height:50px;
height:50px;
}
Result
JS-Fiddle example: http://jsfiddle.net/pG4y6/
How can I achieve this with changing the CSS?
المحلول
نصائح أخرى
In order to vertically center a line of text in a DIV, simply set line-height equal to height of div, so:
div
{
line-height:50px;
}
To vertically center a div in another one, the most common tecnique is:
.logo
{
display:block;
position:absolute;
top:50%;
margin-top:-25px;
}
So, in other words, offset 50% from the top and then push it up again with negative margin-top set to half box height.
لا تنتمي إلى StackOverflow