在html页面中,为了排版上的美观或是在不同尺寸的屏幕上正常显示,我们一般都会将元素进行水平居中或是垂直居中,现在 做一下总结:
实现水平居中:
对于行内元素来说,直接对要设置的元素设置text-align:center属性就行了,代码如下:
span{text-align:center;}
而对于块状元素来说,分为元素定宽和不定宽两种情况:
当元素定宽时:左右margin值设为auto或将右margin值设为auto;如
<style type="text/css">
#nihao{
width: 500px;
margin: 20px auto;//也可以是margin:auto;
border: 2px solid red;
background-color: olive
}
</style>
<body>
<div id="nihao">nb</div>
</body>
当块状元素不定宽度时,要实现水平居中,有如下方法:
1,加入table 标签;table 本身不是块级元素,如果不给它设定宽度的话,会由内部元素的宽度“撑开”,但即使不设定它的宽度,仅设置 margin-left:auto 和 margin-right:auto 就可以实现水平居中。这种方法的缺点是加入了无语义标签;代码如下:
<style type="text/css">
table{margin-left:auto;margin-right:auto;}
.yanshi li{float:left;margin-right:5px;>
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<ul class="yanshi">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
2 、设置display:inline;即把元素设置为行内元素,采用text-align:center属性值来将元素水平居中;但这种 方法将元素设为行内元素,就丢失了块状元素的特点,比如就不能设置宽度和高度,可能对整个布局产生影响;代码如下:
<style type="text/css">
.nihao{
display: inline;
background-color: olive;
}
</style>
</head>
<body>
<ul class="nihao">
<li a="#">1</li>
<li a="#">2</li>
<li a="#" >3</li>
</ul>
可以看出如果要实现元素水平居中,很重要的一点是必须将父元素设置为
text-align: center;
3,、设置给父元素设置float属性后再设置position:relative;和left:50%;,然后给子元素设置position:relative;和left:50%,实现水平居中;如:
<style type="text/css">
.nihao{
float:left;
background-color: olive;
position: relative;
left: 50%;
}
.nihao li{
position: relative;
left: 50%;
}
</style>
</head>
<body>
<ul class="nihao">
<li a="#">1</li>
<li a="#">2</li>
<li a="#" >3</li>
</body>
让元素垂直居中的方法:
1、单行文本的垂直居中:设置元素的height属性和line-height属性,如:
<style type="text/css">
.parent{ width:800px; margin:0 auto; border:1px solid red;}
.parent p{border:1px dashed red; line-height:60px; margin:30px;}
</style>
</head>
<body>
<div class="parent">
<p>bairiyishanjin</p>
</div>
2、多行文本的垂直居中:给块级元素设置:display:table-cell;激活vertical-align属性,
<style>
*{padding: 0;margin:0;font-size: 12px;}
.nihao{
display: table-cell;
border:1px solid blue;
vertical-align: middle;
height:500px;
}
</style>
<div class="nihao">
<p>你好!</p>
</div>
这种方法适用于各种情况,不管是容器定高还是不定高;
多行文本垂直居中还有一种方法:设置父元素的行高,将子元素inline-block化,将line-height设为normal;将基线设置为vertical-align:middle即可,代码如下:
<div style="border:1px solid red;line-height: 300px;">
<p style="display: inline-block;line-height: normal;vertical-align: middle;text-align: left;">你好,明天</p>
</div>
3、对于行级元素来说,可以直接设置它的:vertical-align:middle;但是此种情况仅适用于行级元素;
设置图片垂直居中显示的做法
1.当图片直接作为背景图片时:设置背景的高度,宽度可以不设置,设置background-position:center;这种相对简单;
2.设置div的height和img图片一致,设置父div的text-align:center;设置img的vertical-align:middle;
3.固定图片大小的设置:display:block;margin:0 auto;
这3种方法简单高效,本人亲测。