0

我试图在流畅的布局中居中文本元素，这意味着大小<div>不固定。

我找到了一个非常好的解决方案，可以让孩子<div>在<div>水平和垂直方向上居中，它的工作原理是：fiddle。（原文来自本帖的第二种方法）

但是，如小提琴所示，该Large Text元素并未完全垂直定位在 parent 的中心<div class="block">，而是整个 child<div class="centered">居中。

我尝试将两个文本元素分成两个单独<div>的元素，并将仅包含元素的Large Text元素居中。但是，它不起作用，因为第二个<div>包含small text被推出父级<div class="block">

那么我应该如何修改当前的居中解决方案，以便Large Text元素在 parent 中准确居中<div class="block">，同时仍然包含small text元素正下方的Large Text元素？

4

2 回答 2

0

vertican-align被引入 CSS 以替代valign表格的 HTML 属性。您会注意到，display:inline-block;不会创建表格单元格，并且根本不会真正居中vertical-align。如果您不太关心< IE8，您可以display:table在父母和孩子上使用。display:table-cell

除了上述之外，没有快速简便的方法可以在父母中居中。但是，如果您知道元素的高度，则可以使用 div 上的旧图像放置技巧。

<div>
    <p>Centred Text, Horizontal and Vertical</p>
</div>

和 CSS

div {
    positon:relative;
    text-align:center;
    height:400px;
}

div p {
    position:relative;
    display:inline-block;
    height:30px;
    margin-top:-15px;
    top:50%;
    background-color:#cccccc;
}

小提琴示例

如果这对您不起作用，您也可以定位<p>绝对，尽管您需要在没有 text-align:center 在父级和 display:inline-block 的帮助下将其水平居中。

于 2012-08-20T23:42:34.890 回答
0

如果你还在寻找答案，我做了一个演示： http ://dabblet.com/gist/3762377

当然，您必须为大文本（我的演示中的'.title'）提供一个固定的高度。然后使用负边距将 .box 向上拉，其值等于 .title 的高度。

标记是：

<div class="container">

    <div class="box">
        <h1 class="title">Title</h1>
        <p>Some text</p>
    </div>

</div>

CSS：

.container {
    display: inline-block;      
    text-align: center;
    }
    .container:before {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        margin-right: -4px;
        }

    .box {
        display: inline-block;
        vertical-align: middle;
        width: 400px;
        margin-top: 70px; /* Height of .title. In this case .title's line-height. */
        }
    .title {
        display: block;
        margin: 0;
        padding: 0;     

        line-height: 70px;/* This property could be either height or top,bottom padding. */ 
        }
于 2012-09-21T16:24:06.857 回答