居中的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; 
}