我试图让我的文本垂直对齐到abc div的div中间。
我想保持高度为50px,文本在div的中间垂直对齐。
我还没有找到解决这个问题的方法,也许我找不到合适的东西。
body{
padding: 0;
margin: 0;
margin: 0px auto;
}
#main{
position: relative;
background-color:blue;
width:500px;
height:500px;
}
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
vertical-align:middle;
}
<div id="main">
<div id="abc">
asdfasdfafasdfasdf
</div>
</div>
你可以使用line-height: 50px;
,那里你不需要vertical-align: middle;
。
如果你有多行,上面会失败,所以在这种情况下,你可以使用span
包装文本,而不是使用display: table-cell;
和display: table;
以及vertical-align: middle;
,也不要忘记使用width: 100%;
用于#abc
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
display: table;
width: 100%;
}
#abc span {
vertical-align:middle;
display: table-cell;
}
我能想到的另一个解决方案是使用transform
属性与translateY()
,其中Y
显然代表Y轴。这是非常直接的...你需要做的就是将元素位置设置为absolute
,然后将50%
定位为top
,并使用负-50%
从它的轴转换
div {
height: 100px;
width: 100px;
background-color: tomato;
position: relative;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
请注意,旧版浏览器(例如IE8)不支持此功能,但您可以分别使用-ms, -moz
和-webkit
前缀制作IE9和其他较旧版本的Chrome和Firefox。
有关transform
的更多信息,请参阅here。
此代码适用于垂直中间和水平中心对齐:
.parent-class-name {
position: relative;
}
.className {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
这很简单:给父母这个:
display: table;
并给孩子这个:
display: table-cell;
vertical-align: middle;
而已!
.parent{
display: table;
}
.child{
display: table-cell;
vertical-align: middle;
padding-left: 20px;
}
<div class="parent">
<div class="child">
Test
</div>
<div class="child">
Test Test Test <br/> Test Test Test
</div>
<div class="child">
Test Test Test <br/> Test Test Test <br/> Test Test Test
</div>
<div>
老问题,但现在CSS3使垂直对齐非常简单!
只需将以下css添加到#abc
:
display:flex;
align-items:center;
原始问题演示updated
简单示例:
.vertical-align-content {
background-color:#f18c16;
height:150px;
display:flex;
align-items:center;
/* Uncomment next line to get horizontal align also */
/* justify-content:center; */
}
<div class="vertical-align-content">
Hodor!
</div>
我找到了SebastianEkström的解决方案。这很快,很脏,而且效果很好。即使你不知道父母的身高:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
阅读完整的文章here。
你可以使用行高作为div的高度。但对我来说,最好的解决方案是 - > position:relative; top:50%; transform:translate(0,50%);
加入line-height
怎么样?
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
vertical-align:middle;
line-height: 45px;
}
或者padding
上的#abc
。 This is the result with padding
更新
添加你的CSS:
#abc img{
vertical-align: middle;
}
The result。希望这是你想要的。
试试这个:
.main_div{
display: table;
width: 100%;
}
.cells {
display: table-cell;
vertical-align: middle;
}
另一种使div居中的方法:
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50px;
height: 100px;
margin: auto;
}
使用translateY CSS属性将文本垂直居中于其容器中
<style>
.centertext{
position: relative;
top: 50%;
transform: translateY(40%);
}
</style>
然后将其应用于您的包含DIV
<div class="centertext">
<font style="color:white; font-size:20px;"> Your Text Here </font>
</div>
调整translateY百分比以满足您的需求。希望这可以帮助
div {
height:200px;
text-align: center;
padding: 2px;
border: 1px solid #000;
background-color: green;
}
.text-align-center {
display: flex;
align-items: center;
justify-content: center;
}
<div class="text-align-center"> Align center</div>