当前位置: 首页 > 面试题库 >

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

乐正浩言
2023-03-14
问题内容

我试图找到最有效的方法来使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>

问题答案:

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


 类似资料:
  • 问题内容: 下面的代码(也可以在JSFiddle上作为演示使用没有将文本放在中间,正如我理想中的那样。即使使用属性,我也找不到任何方法可以使文本垂直居中。我怎样才能做到这一点? 问题答案: 创建一个用于文本内容的容器,也许是。 JSFiddle

  • 问题内容: 如何在容器中对齐图像? 例 在我的例子,我需要垂直居中的在用“: 的高度是固定的,图像的高度是未知的。如果这是唯一的解决方案,则可以添加新元素。我正在尝试在Internet Explorer 7和更高版本的WebKit,Gecko上执行此操作。 在这里查看jsfiddle 。 问题答案: 唯一的(和最好的跨浏览器)的方式,因为我知道是使用佣工,并在这两个元素。 因此,有一个解决方案:h

  • 问题内容: 我有一个包含两个图片的div和一个。它们都需要在div内垂直对齐,彼此相邻。 其中一张图片需要放在div内。 要在所有常见的浏览器上运行,需要什么CSS? 问题答案: 简而言之: 内联元素 (并且 仅 内联元素)可以在上下文中垂直对齐。但是,“上下文”不是整个父容器的高度,而是它们所在的文本行的高度 对于块元素,垂直对齐更加困难,并且在很大程度上取决于特定情况: 如果内部元件可以有一个

  • 问题内容: 目标:纯Canvas上的Android> = 1.6。 假设我想编写一个函数,该函数将绘制一个(宽度,高度)大的红色矩形,然后在其中绘制一个黑色的 Hello World 文本。我希望文本在视觉上位于矩形的中心。因此,让我们尝试: 现在,我不知道要在drawText的参数中加上标记的内容,即我不知道如何垂直对齐文本。 就像是 ???? = topLeftY + height / 2 +

  • 问题内容: 我在div中垂直对齐图像时遇到问题 据我所知,我需要“显示:块;” 定位图像在中心,这是可行的。同样在教程中,我找到了很多答案,但它们并不是“有用的”,因为我的所有图像都不在同一高度! 问题答案: 如果容器中的高度固定,则可以将line-height设置为与高度相同,并且它将垂直居中。然后只需添加text-align使其水平居中即可。 编辑 您的代码应如下所示: 更新 现在是2016年

  • 问题内容: 我在div内有一个图像和一些文本,我想使用CSS将图像和文本放在div的垂直中心。问题是我不知道会有多少行文本,但是文本和图像必须始终在中间。例如,当只有一行文本时,div应该如下所示: 如果最终我有更多行或文本的高度大于图像的高度,则图像应对齐,如下所示: 我很难获得这种效果,没有使用javascript可以做到这一点吗? 观察 我指的div的父div具有position:relat