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

小编典典

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

all

我正在尝试找到将文本与 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>

阅读 124

2022-02-25

共1个答案

小编典典

在现代浏览器中执行此操作的正确方法是使用 Flexbox。

有关在旧浏览器中工作的一些旧方法，请参见下文。

CSS 中的垂直居中
http://www.jakpsatweb.cz/css/css-vertical-center-
solution.html

文章摘要：

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

2022-02-25