您的位置：首页 > 其它

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

2016-07-22 01:01 786 查看

文本居中与垂直居中



@{
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航