文本對齊的CSS：內聯經常去右對齊

<div class="box">V</div><span class="notice">OK</span> 
      <div class="box">B</div><span class="notice">BROKEN</span> 
      <div class="box">C</div><span class="notice">CUT</span> 
      <div class="box">BE</div><span class="notice">BENT</span> 
      <div class="box">D</div><span class="notice">DENT</span> 
      <div class="box">H</div><span class="notice">HOLE</span> 
      <div class="box">M</div><span class="notice">MISSING</span> 
      <div class="box">S</div><span class="notice">SCRATCH</span> 
      <div class="box">Z</div><span class="notice">MODIFICATION</span> 

.box{ 
      display: inline; 
      width: 5px; 
      height: 20px; 
      border: 1px solid black; 
      padding-left: 20px; 
      margin-top: 10px;  
      margin-left: 10px; 
      text-align: center; 
     } 

     .notice{ 
      font-weight: bold; 
      font-size: 8px; 
      margin-top: 0; 
      margin-right: 2px; 
      margin-left: 10px; 
      margin-bottom: 10px; 
     }

我怎樣才能使其像V，B那些箱子中心等上？。我使用文本對齊，但它不工作。如需幫助，但如此讚賞

來源

2015-12-31 Fadly Dzil

使用'填充左：用'文本對齊沿20px'：center'將推動你的文字中間偏左20個像素。最好的解決方案是刪除'text-align：center'並在右側添加填充。 –

請寫出這樣：

.box{ 
    display: inline-block; 
    width: auto; 
    height: 20px; 
    border: 1px solid black; 
    padding-left: 10px; 
    padding-right:10px; 
    margin-top: 10px;  
    margin-left: 10px; 
    text-align: center; 
    }

click here用於演示

來源

2015-12-31 14:03:58

更改CSS是這樣的：

 .box{ 
      display: inline-block; 
      width: 25px; 
      height: 20px; 
      border: 1px solid black; 
      padding: 3px 5px 0; 
      margin-top: 10px;  
      margin-left: 10px; 
      text-align: center; 
     }

寬度過於小（爲5px ），並且我也改變了填充。

這裏有一個小提琴：https://jsfiddle.net/zbny6ry7/

來源

2015-12-31 14:04:00 Johannes

文本對齊的CSS：內聯經常去右對齊

回答

相關問題