HTML元素居中学习中遇到的问题

来源：互联网发布：明星变声软件编辑：程序博客网时间：2024/06/06 00:02

父级元素设置text-align: center;，子级块元素设置display: inline;后，子级元素需要设置line-height：等于父级元素的高度来实现子级元素居中显示。注：此时子级元素设置width、height不管用。

line-heigth 属性是针对：父元素高度确定的单行文本（内联元素）

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">         <title></title>        <style type="text/css">            *{                margin: 0;                border: 0;                padding: 0;            }            #box{                text-align: center;                height: 90px;                text-align: center;                border: 1px solid pink;            }            ul li{                display: inline;                line-height: 90px;                list-style: none;                border: 1px solid pink;            }        </style>    </head>    <body>        <div id="box">            <ul>                <li>首页</li>                <li>我的文章</li>                <li>联系我们</li>            </ul>        </div>    </body></html>

div中列表居中显示

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{                margin: 0;                border: 0;                padding: 0;            }            ul{                width: 450px;                height: 90px;                margin: 0 auto;            }            ul li{                width: 150px;                height: 90px;                line-height: 90px;                float: left;                text-align: center;                list-style: none;            }        </style>    </head>    <body>        <div id="box">            <ul>            <li>首页</li>            <li>我的文章</li>            <li>联系我们</li>        </ul>        </div>    </body></html>

阅读全文

0 0