首页 文章

可以在div中垂直对齐文本吗？ [重复]

提问于
浏览 次
575

这个问题在这里已有答案：

下面的代码（也可用作a demo on JS Fiddle）不会将文本放在中间，正如我理想的那样 . 即使使用 margin-top 属性，我找不到任何方法在div中垂直居中文本 . 我怎样才能做到这一点？

<div id="column-content">
    <img src="http://i.stack.imgur.com/12qzO.png">
    <strong>1234</strong>
    yet another text content that should be centered vertically
</div>

#column-content {
    display: inline-block;
    border: 1px solid red;
    position:relative;
}

#column-content strong {
    color: #592102;
    font-size: 18px;
}

img {
    margin-top:-7px;
    vertical-align: middle;        
}
css vertical-alignment

10 回答

  • 176

    为您的文本内容创建一个容器，也许是 span .

    #column-content {
  display: inline-block;
}
img {
  vertical-align: middle;
}
span {
  display: inline-block;
  vertical-align: middle;
}

/* for visual purposes */
#column-content {
  border: 1px solid red;
  position: relative;
}

    <div id="column-content">

  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong>
    yet another text content that should be centered vertically</span>
</div>

    JSFiddle

    回复于
  • 24

    Andres Ilich说得对 . 以防有人错过他的评论......

    A.) If you only have one line of text:

    div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
}

    <div>vertically centered text</div>

    B.) If you have multiple lines of text:

    div
{
  height: 200px;
  line-height: 200px;
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 18px; /* <-- adjust this */
}

    <div><span>vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text</span></div>
    回复于
  • 60

    Update April 10, 2016

    现在，Flexbox应该用于垂直（或甚至水平）对齐项目 .

    <div class="flex-container">
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

<style>
.flex-container {
    display:flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}
</style>

    可以在CSS Tricks上阅读有关flexbox的指南 . 感谢Ben（来自评论）指出，没有时间更新 .

    一个名叫Mahendra的好人发布了一个非常有效的解决方案here

    以下类应使元素水平和垂直居中于其父元素 .

    .absolute-center {

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

}
    回复于
  • 4

    这是一个老问题，但接受的答案不适用于多行文本 . 我按照here解释更新了JSfiddle to show css multiline text vertical align：

    <div id="column-content">
    <div>yet another text content that should be centered vertically</div>
</div>

#column-content {
    border: 1px solid red;
    height: 200px;
    width: 100px;
}
div {
    display: table-cell;
    vertical-align:middle;
    text-align: center;
}

    它也可用
    在"yet another..."

    回复于
  • -2

    试试这个：

    HTML

    <div><span>Text</span></div>

    CSS

    div {
    height: 100px;
}

span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}
    回复于
  • 610

    这应该是有效的：

    #column-content {
        --------
        margin-top:auto;
        margin-bottom:auto;
    }

    在你的演示中尝试过 .

    回复于
  • 7

    为了使Omar（或Mahendra）的解决方案更加通用，相对于FireFox的代码块应替换为以下内容：

    /* Firefox */
display:flex;
justify-content:center;
align-items:center;

    当你想要将盒子放在屏幕中或它的直接祖先中时，Omar的代码存在问题，否则会出现问题 . 这种居中可以通过设置其位置来完成

    position: relative; 或 position:static; （不与位置：绝对或固定） .

    然后保证金：auto;或者保证金权利：auto;保证金左：自动;

    在这个盒子中心调整环境下，奥马尔的建议不起作用 . 在IE8中不起作用（但市场份额为7.7％） . 因此，对于IE8（和其他浏览器），应该考虑在其他上述解决方案中看到的解决方法 .

    回复于
  • 3

    如果您需要多行，这是最简单的方法 . 在另一个 span 中包装 span 'd文本，并使用 line-height 指定其高度 . 多行的技巧是重置内部 span 的 line-height .

    <span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

    .textvalignmiddle {
    line-height: /*set height*/;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /*set line height back to normal*/
}

    DEMO

    当然外部的 span 可能是 div 或者什么叫做

    回复于
  • 11

    同时为css #column-content strong 添加垂直对齐：

    #column-content strong {
    ...
    vertical-align: middle;
}

    另见updated example .

    ===更新===

    使用跨越其他文本的 Span 和另一个垂直对齐：

    HTML：

    ... <span>yet another text content that should be centered vertically</span> ...

    CSS：

    #column-content span {
    vertical-align: middle;
}

    另见next example .

    回复于
  • 400

    我知道它是完全愚蠢的，你通常不应该在不创建表时使用表格，但是：表格单元格可以对齐多行文本垂直居中，甚至默认情况下这样做 . 所以一个非常好的解决方案可能是这样的：

    HTML：

    <div class="box">
  <table class="textalignmiddle">
    <tr>
      <td>lorem ipsum ...</td>
    </tr>
  </table>
</div>

    css :(使表项始终适合框div）

    .box {
  /* for example */
  height: 300px;
}

.textalignmiddle {
  width: 100%;
  height: 100%;
}

    看到这里：http://www.cssdesk.com/LzpeV

    回复于

相关问题