html - 显示 : inline always go to right align 中的文本对齐 css

Question

这是我的 fiddle :

https://jsfiddle.net/dn26r0xz/ ,

<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 等框为中心？我使用 text-align 但它不起作用。求助，不胜感激

Answer 1

请这样写:

.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用于演示