为什么文字一直不能居中?

尝试了各种方法使文字居中都不可以,总是溢出,代码很简单,求大神解答
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            padding: 0;
            font-family: "宋体";
        }
        #box{
            width: 353px;
            height: 390px;
            background-color: #c6cad7;
            border: 1px solid black;
            margin: auto;
        }
        .text{
            width: 353px;
            height: 40px;
            margin: 0 0 10px 0;
            background-color: white ;
            padding: 0;
            word-spacing: 43px;
            line-height: 40px;
            
        }
        #box:last-child{
            margin-bottom: 0;
        }
        #none{
            display: inline-block;
            border: 20px solid white;
            border-left: 20px solid #fceef1;
            position: relative;
            left: 2px;
        }
        span{
            width: 106px;
            height: 40px;
            background-color: #fceef1;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="text"><span>装修设计<div id="none"></div></span>全包 半包 设计</div>
        <div class="text"><span>家装建材<div id="none"></div></span>吊灯 马桶 地板</div>
        <div class="text"><span>全屋定制<div id="none"></div></span>衣柜 橱柜 门</div>
        <div class="text"><span>住宅家居<div id="none"></div></span>沙发 床 桌椅</div>
        <div class="text"><span>家纺订品<div id="none"></div></span>四件套 被 枕头</div>
        <div class="text"><span>家饰布艺<div id="none"></div></span>摆件 挂画 窗帘</div>
        <div class="text"><span>生活家居<div id="none"></div></span>收纳 拖鞋</div>
        <div class="text"><span>居家必备<div id="none"></div></span>汤锅 碗盘 雨伞</div>
    </div>
</body>

</html>

阅读 6k
4 个回答

文本与一个块元素被包含在另一个父元素(块元素或内联元素)中时,文本的位置与块元素底部位置默认对齐(即块元素相当于一个超大的文字,个人认为单个文字也是一个块元素),而这时无论用line-height还是vertical-align都无法对文字进行单独定位(块元素height大于文字的情况下,当然,如果块元素height小于文字的时候就另当别论了),因此,单独包裹文本元素灵活性更好,<span>标签最好只包含文本。

也不知道自己总结的对不对,希望大神给小弟提点建议

.text 加上 margin:auto;
就可以了

新手上路,请多包涵

你这种写法其实不算太好
给你稍微改了下
效果链接

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题