Question

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

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

我怎样才能制作那个CSS？

Answer 1

一种方法是使用text-align: center和display: inline-block。这是两个元素集中的小提琴：http://jsfiddle.net/rs6bmfq9/。而且，这里有一个略有不同的小提琴，删除了“text”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;
}

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

1 个答案: