Question

我一直试图让文字像http://i.imgur.com/Vb7NuTV.png一样垂直居中，但它似乎不想对齐。

@import url('http://getbootstrap.com/dist/css/bootstrap.min.css');
h4 {
  margin-top: 25px;
}

.row {
  margin-bottom: 20px;
}

.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}

[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86, 61, 124, .2);
  height: 250px;
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
}

.innertext {
  display: inline-block;
  width: 90%
}

.label {
  position: absolute;
  top: 50%;
  margin-top: -10px;
}

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="innertext">Text Test Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
    </div>
  </div>
</div>

Jsfiddle：http://jsfiddle.net/r0gsewtd/1/

Answer 1

在这里：Fiddle

.innertext {
  position: relative;
  transform: translateY(-50%);
  top: 50%;
}

Answer 2

[class*="col-"] {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    background-color: rgba(86, 61, 124, .15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86, 61, 124, .2);
    height: 250px;
    display: table-cell;
    vertical-align: middle;
}

将最后两行添加到[class*="col-"]

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

你也可以检查一下： How do I vertically center text with CSS?

Answer 3

您可以通过应用表格显示属性来垂直居中文本添加

 display:table;

到父类div-col-md-4 然后添加

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

到.innertext

demo

然后代码变为

 .col-md-4 {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86, 61, 124, .15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, .2);
height: 250px;
display:table;
}

.innertext {
display:inline-block;
width:90%;
    display:table-cell;
vertical-align:middle;

}

文字不会垂直居中？

3 个答案: