line-height ~ text-align 文本居中与垂直居中 | div水平垂直居中

最新推荐文章于 2024-09-20 13:21:53 发布

无盐海

最新推荐文章于 2024-09-20 13:21:53 发布

阅读量1w

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/Fanbin168/article/details/51990501

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文本居中与垂直居中

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/scripts/jquery-1.8.2.js"></script>
    <style type="text/css">
        #nav {
            width: 450px;
            height: 40px;
            background-color: #808080;
            margin: 0 auto;
        }

        ul {
            list-style-type: none;
            padding: 0px;
        }

        li {
            width: 90px;
            float: left;
            line-height: 40px; /*垂直居中*/
            text-align: center; /*文本居中*/
        }

        #nav ul li:hover /*--当鼠标聚焦到一级菜单下的li的时候将背景设为红色--*/ {
            background-color: #ff0000;
        }
    </style>
</head>
<body>
    <div>
        <div id="nav">
            <ul>
                <li> 首页</li>
                <li>课程大厅</li>
                <li>学习大厅</li>
                <li>金典案例</li>
                <li>关于我们</li>
            </ul>

        </div>
    </div>
</body>
</html>

DIV 垂直居中

<head>
	<style type="text/css">
        body {
            width: 500px;
            height: 500px;
            border:red 1px solid;
            position:relative
        }
        #div1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
           
            position:absolute;
            top:50%;
            left:50%;
            margin:-50px -50px;

        }
    </style>
</head>
<body>
    <div id="div1"> </div>  
</body>

DIV水平居中

<head>
<style type="text/css">
        <style type="text/css">       
        #div1 {
            width: 100px;
            height: 100px;
            background-color: yellow;

            margin: 0px;
            padding: 0px;
            margin: auto;         
        }
    </style>
    </style>
</head>
<body>
    <div id="div1"> </div>  
</body>