css - 把東西放在居中元素的左邊？

Question

該圖顯示了我想實現的目標。可以做到嗎？

爲中心，沒有把一些東西到左側，在這裏看到：How do I center float elements?

Answer 1

是的！如果你小心你的工作，那可以通過絕對定位來實現。

首先，製作一個包裝<div>，中心文本爲<div>，包含一個孩子（左側）<div>。

<div class='wrapper'> 
    <div class='centered'> 
     This text is horizontally centered. 
     <div class='left'> 
      This text is to the left of the centered text. 
     </div> 
    </div> 
</div> 

然後，將封裝的text-align到center：

.wrapper { 
    text-align: center; 
} 

將居中文本display: inline-block和position: relative：

.centered { 
    display: inline-block; 
    position: relative; 
} 

最後，定位左文本絕對有right: 100% ：

.left { 
    position: absolute; 
    right: 100%; 
    width: 100px; 
    top: 0; 
} 

這裏是JSFiddle：http://jsfiddle.net/jeremyblalock/28q08auq/1/