Question

我试图让我的文本垂直对齐到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>

Answer 1

您可以使用line-height: 50px;，那里不需要vertical-align: middle;。

Demo

如果您有多行，则上述操作会失败，因此在这种情况下，您可以使用span包装文字，而不是使用display: table-cell;和display: table;以及vertical-align: middle; ，也不要忘记width: 100%;使用#abc

Demo

#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%); }

-ms, -moz

Demo

请注意，旧版浏览器（例如IE8）不支持此功能，但您可以分别使用-webkit和transform前缀来制作IE9和其他旧浏览器版本的Chrome和Firefox。< / p>

有关{{1}}的详细信息，请参阅here。

Answer 2

这很简单：给父母这个：

display: table;

并给孩子这个：

display: table-cell;
vertical-align: middle;

那就是它！

＆＃13;

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

＆＃13;

<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>

＆＃13;

Answer 3

旧问题，但现在 CSS3使垂直对齐真的简单！

只需将以下css添加到#abc：

display:flex;
align-items:center;

Simple Demo

原始问题演示updated

简单示例：

＆＃13;

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

＆＃13;

<div class="vertical-align-content">
  Hodor!
</div>

＆＃13;

Answer 4

我在SebastianEkström找到了这个解决方案。这很快，很脏，而且效果很好。即使你不知道父母的身高：

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

阅读完整文章here。

Answer 5

您可以使用线条高度作为div的高度。但对我来说，最好的解决方案就是这个 - ＆gt; position:relative; top:50%; transform:translate(0,50%);

Answer 6

如何添加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;
}

Fiddle, line-height

padding或#abc #abc img{ vertical-align: middle; }。 This is the result with padding

<强>更新

添加你的css：

{{1}}

The result。希望这是你想要的。

Answer 7

试试这个：

.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;
}

Answer 8

.container { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<h2>Centering Div inside Div, horizontally and vertically without table</h2>
<p>1. Positioning and the transform property to vertically and horizontally center</p>
<p>2. CSS Layout - Horizontal & Vertical Align</p>

<div class="container">
  <div class="center">
    <p>I am vertically and horizontally centered.</p>
  </div>
</div>

Answer 9

使用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”百分比以适合您的需求。希望这会有所帮助

Answer 10

 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>

Answer 11

此代码适用于垂直中间和水平中心对齐：

＆＃13;

.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%);
}

＆＃13;

div垂直对齐中间css

11 个答案: