Question

我有这个代码，我无法将第二个div中的内容垂直对齐到中心。

<div style="min-height: 317px"> <!-- this min div is auto generated-->
    <div class="verticalalign">
        <h1>Heading</h1>
        <p>Some text</p>
    </div>
</div>

类.verticalalign的CSS如何写入第二个div的垂直对齐中心？
家长div我无法修改，它将从主题短代码中生成。

我还需要在子div中进行水平文本对齐。

Answer 1

Vertical-align仅适用于表格元素，因此：

.fusion-column-wrapper {background: #eee; display: table; width: 100%;}
.verticalalign {display: table-cell; vertical-align: middle; }

http://jsfiddle.net/xcgjkm8v/

请注意vertical-align的有效值为middle，而不是center。

Answer 2

你可以创建中心而不给主要div提供css，如下所示：

＆＃13;

.verticalalign{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

＆＃13;

<div style="min-height: 317px"> 
    <div class="verticalalign">
    <h1>Heading</h1>
    <p>Some text</p>
    </div>
</div>

＆＃13;

希望它会有所帮助。

div

2 个答案: