html - 如果右侧的 div 上有内容，则在左侧居中的 div

Question

我有一个居中的 div，另一个在右侧，可能有一些内容。如果右边的这个有内容，居中的需要向左移动。最后，两个 div 的内容需要居中。

例如:我在中心有一个搜索框。如果我有搜索结果 - 结果和搜索框需要位于中心。所以搜索框向左移动了一点。

我怎样才能用 CSS 制作它？

Answer 1

一种方法是使用 text-align: center 和 display: inline-block。这是一个以两个元素为中心的 fiddle :http://jsfiddle.net/rs6bmfq9/ .而且，这里有一个略有不同的 fiddle ，其中删除了“文本”div:http://jsfiddle.net/hrham7w9/ .

HTML:

<div class = "container">
    <input type = "text" />
    <div>
        Nam at justo dignissim, dapibus lorem eget, consectetur metus. Suspendisse vitae massa a nunc congue pulvinar non luctus mi. Nam turpis ex, laoreet tempor justo ac, cursus convallis urna. Sed eros ligula, congue ut lacinia auctor, porttitor ut quam. Nullam maximus, dui in eleifend viverra, est augue vestibulum est, id lacinia nibh ante vel velit. Aenean vitae sem ipsum. In porta felis urna, vel tincidunt odio aliquam feugiat.
    </div>
</div>

CSS:

.container {
    white-space: nowrap;
    text-align: center;
}

.container > * {
    display: inline-block;
}

.container > input {
    width: 30%;
    vertical-align: top;
}

.container > div {
    width: 40%;
    text-align: left;
    white-space: normal;
    vertical-align: top;
    border: 1px dotted gray;
}