Demo Fiddle

Question

我正在尝试将文字放在中心。垂直位于中间但不是水平位置。我错过了什么？这是FIDDLE

<div style="display: table; height: 600px; overflow: hidden;text-align: center">

    <div style="display: table-cell; vertical-align: middle;
                              text-align: center;" class="dlgImg">this is text</div>

</div>

Answer 1

        <div style="display: table; height: 600px; overflow: hidden;text-align: center;margin:auto">
            <div style="display: table-cell; vertical-align: middle;text-align: center;margin:auto" class="dlgImg">this is text</div>
        </div>

Answer 2

问题是你的两个div应该是100％宽度。使其达到100％，它将解决您的问题。

Live Demo

添加Width:100%将解决您的问题，如下所示：

<div style="display: table;width:100%; height: 600px; overflow: hidden;text-align: center">

    <div style="display: table-cell;width:100%; vertical-align: middle;
                              text-align: center;" class="dlgImg">this is text</div>

</div>

Answer 3

您错过了div的width。将宽度添加到一个或两个div之后，一切都会正常。

Answer 4

使用此

<div style="display: table; height: 600px; overflow: hidden;text-align: center;width:100%">
    <div style="display: table-cell; vertical-align: middle;text-align: center;" class="dlgImg">this is text</div>
</div>

<强> JSFIDDLE

Answer 5

将width:100%;添加到第一个div

<div style="display: table; height: 600px; overflow: hidden;text-align: center; width:100%;">
    <div style="display: table-cell; vertical-align: middle;text-align: center;" class="dlgImg">this is text</div>
</div>

Demo Fiddle

Answer 6

给出宽度：100％或你想要第一个div的宽度

<div style="display: table; width:100%;height: 600px; overflow: hidden;text-align: center">

    <div style="display: table-cell; vertical-align: middle;
                              text-align: center;" class="dlgImg">this is text</div>

</div>

Answer 7

如果您发现div

中有div

您的设置如下：

<div class="imgContainer">
  <div>
    <div>
          /* text here */
    </div>
  </div>
</div>

您以div.imgContainer样式为width:800px; div width:600px;和下一个inline提供了确切的宽度，但是您不能在div中给出宽度文本所属的地方。

尝试此解决方案希望此帮助

.imgContainer div{
    width:100%;
}

DEMO

Answer 8

您的垂直对齐功能正常，因为您设置了height的{{1}}。

table。

如果为表

提供style="display: table; height: 600px;，则水平对齐将起作用

width

HTML：将文本放在中心

8 个答案:

Demo Fiddle