Question

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

我找到了一个非常好的解决方案，可以将孩子<div>水平和垂直放在父<div>内，并且它的工作方式为：fiddle。（最初来自the second method of this post）

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

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

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

Answer 1

vertican-align被引入CSS作为表的valign HTML属性的替代。您会注意到display:inline-block;不会创建表格单元格，也不会完全以vertical-align为中心。如果你不太关心孩子，可以在父母和display:table上使用display:table-cell。 IE8。

除了上述内容之外，没有快捷方便的方法在父母中心。但是，如果您知道元素的高度，则可以使用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;
}

Fiddle example

如果这对您不起作用，您也可以绝对定位<p>，但是您需要将其水平居中，而不需要text-align的帮助：在父级和显示中心：内联 - 阻止孩子。

Answer 2

如果你还在寻找答案，我做了一个演示： 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. */ 
        }

使用流体布局垂直居中父div中的一个div

2 个答案: