如何在div中垂直对齐文本？

一尘不染

如何在div中垂直对齐文本？

html

我试图找到最有效的方法来使div对齐文本。我尝试了几件事，但似乎都没有用。

.testimonialText {

  position: absolute;

  left: 15px;

  top: 15px;

  width: 150px;

  height: 309px;

  vertical-align: middle;

  text-align: center;

  font-family: Georgia, "Times New Roman", Times, serif;

  font-style: italic;

  padding: 1em 0 1em 0;

}


<div class="testimonialText">

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor

  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

阅读 515

2020-05-10

一尘不染

对于CSS 2浏览器，可以使用display:table/ display:table-cell来使内容居中。

jSFiddle提供了一个示例：

div { border:1px solid green;}


<div style="display: table; height: 400px; overflow: hidden;">

  <div style="display: table-cell; vertical-align: middle;">

    <div>

      everything is vertically centered in modern IE8+ and others.

    </div>

  </div>

</div>

可以将旧浏览器（Internet Explorer 6/7）的hack合并为样式，并#用于从较新的浏览器中隐藏样式：

div { border:1px solid green;}


<div style="display: table; height: 400px; #position: relative; overflow: hidden;">

  <div style=

    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">

    <div style=" #position: relative; #top: -50%">

      everything is vertically centered

    </div>

  </div>

</div>

2020-05-10

一尘不染

您需要添加line-height属性，并且该属性必须与的高度匹配div。在您的情况下：

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>
 Run code snippetExpand snippet

实际上，您可能会height完全删除该属性。

不过，这仅适用于一行文本，因此请小心。

2020-05-13

如何在div中垂直对齐文本？

共2个答案