[英]CSS format floated element
I have 2 elements in a div next to each other. 我在div中彼此相邻有2个元素。 How can I make them to be vertical-align=middle?
我怎样才能使它们成为vertical-align = middle?
Example: http://goo.gl/6Hnb4D 范例: http : //goo.gl/6Hnb4D
HTML: HTML:
<div class="selected">
<span class="SelectedOption">Option 1</span>
<b class="button">▾</b>
</div>
CSS: CSS:
.selected {
width: 300px;
height: 50px;
border: 1px solid black;
}
.SelectedOption{
width: 250px;
}
.button{
display: block;
float: right;
}
To to align the contents to the middle vertically, just make the line-height
the same as height
like below: 要将内容垂直对齐到中间,只需使
line-height
与height
相同,如下所示:
.selected {
width: 300px;
height: 50px;
border: 1px solid black;
line-height: 50px;
}
Alternative you can use display:table
in your container and display: table-cell
with vertical-align: middle
in your sub as following: 或者,您可以在容器中使用
display:table
在其子display:table
中使用display:table
display: table-cell
和vertical-align: middle
:
.selected {
width: 300px;
height: 50px;
border: 1px solid black;
display:table;
}
.SelectedOption{
width: 250px;
display: table-cell;
vertical-align: middle;
}
In CSS 3, change your class from this... 在CSS 3中,从此更改您的类...
.SelectedOption{
width: 250px;
}
...to this... ...对此...
.SelectedOption{
position: relative;
top: 30%;
transform: translateY(-50%);
width: 250px;
}
Top is (50% height) - (.5 * 1em) ...or more-or-less 30% in your option box. 顶部是(50%高度)-(.5 * 1em)...或者在您的选项框中大约是30%。
See this terrific blog on the subject: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ 请参阅有关此主题的出色博客:http: //zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.