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

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; 
}