li標簽行內元素高度及居中

本文轉載自查看原文 2016-01-22 10:04 3326 css

<head>
<title><title>
<style type="text/css">
        *
        {
            padding: 0px;
            margin: 0px;
        }
        li
        {
            list-style-type: none;
            width: 150px;
            float: left;
            line-height: 80px;/*行內元素不能設置高度，但可以設置行高*/
            text-align: center;/*讓li內的內容水平居中，行內元素默認垂直居中*/
        }
        span
        {
            position: relative; /* li標簽內的字體和圖片中間對齊，讓字體在原來位置top上移幾個像素*/
            top: -5px;
            font-family: "宋體" , "微軟雅黑" , "黑體";
            font-size: 14px;
            color: #000000;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="../NewImgs/tu_48.png" /><span>耽誤管理</span></li>
        <li>
            <img src="../NewImgs/tu_48.png" /><span>耽誤管理</span></li>
        <li>
            <img src="../NewImgs/tu_48.png" /><span>耽誤管理</span></li>
        <li>
            <img src="../NewImgs/tu_48.png" /><span>耽誤管理</span></li>
        <li>
            <img src="../NewImgs/tu_48.png" /><span>耽誤管理</span></li>
        <li>
            <img src="../NewImgs/tu_48.png" /><span>耽誤管理</span></li>
    </ul>
</body>
</html>

結果

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 關於li標簽行內顯示的問題關於行內元素的垂直居中對齊如何讓一個行內元素（如image）在div中居中 CSS設置行內元素的水平居中 html標簽——內聯標簽(行內元素) html標簽——內聯標簽(行內元素) html哪些標簽塊級元素和行內元素 li 標簽中放a 標簽，文字垂直居中行內元素和塊級元素水平及垂直居中讓多個塊級元素和行內元素一樣水平居中