Question

这是我的小提琴：

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

Answer 2

像这样更改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/

文本在显示中对齐css：内联始终向右对齐

2 个答案: