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

时间:2015-12-31 13:59:47

标签: html css

这是我的小提琴:

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但它不起作用。 如需帮助,我们非常感谢

2 个答案:

答案 0 :(得分:0)

请这样写:

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

答案 1 :(得分:0)

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