css里怎样把字体上下居中左右居中？这是我一段代码

$('#power').append("<span style='color:#FFFFFF;font-size:20px'>"+result.dataInfo+"</span>");

推荐答案 2017-10-17

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>test</title>
    <style>
        /*上下左右居中*/
        #power > span{
            height:50px;  /*对于center2必须指明高度*/
            width: 200px; /*对于center3必须要指明宽度*/
            border: 1px solid red;
            margin: 10px 0;
        }

        /*1. flex : ie等老式浏览器可能不支持*/
        .center1{
            display:flex;
            align-items:center;
            justify-content:center;
        }

        /*2. line-height*/
        .center2{
            display:block;
            line-height: 50px;
            text-align:center;
        }

        /*3. table-cell */
        .center3{
            display:table-cell;
            vertical-align:middle;
            text-align:center;
        }


    </style>
</head>
<body>
    <div id="power"></div>

    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#power')
                .append('<span class="center1">上下左右居中:center1</span>')
                .append('<span class="center2">上下左右居中:center2</span>')
                .append('<span class="center3">上下左右居中:center3</span>');
        });
    </script>
</body>
</html>

追问

我是感谢你呢？还是感谢百度?

追答

都可以

温馨提示：答案为网友推荐，仅供参考

当前网址：http://33.wendadaohang.com/zd/RhPdR0h5BWPWW5PcPd.html

其他回答

第1个回答 2017-10-17

/*字体上下居中条件  行高=高度*/
/*字体左右居中条件  text-align:center*/
span{
    display:block;
    text-align:center;
    height:30px;
    line-height:30px;
}

追问

我想把字体设置在最底部，做对齐，怎样写？

本回答被网友采纳