标签:
在HTML网页排版经常会用到关于对其方式的情况,水平居中和垂直居中。特别是水平居中,并不是一个简单的text-align就可以解决所有的情况。
开始之前普及一点HTML知识,目标很明显,不同的页面结构情况下,要达到居中的效果方式不同。
常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>......此外为标签设置display:block也可强制将其他元素转化成块状元素。 常用的内联元素有: <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>......当然块状元素也可以通过代码display:inline将元素设置为内联元素。 常用的内联块状元素有: <img>、<input>.....代码display:inline-block就是将元素设置为内联块状元素。
默认状态下,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,宽度都为100%,即以行的形式占据位置。内联元素都会在所处的包含元素内从左到右水平分布显示。
水平居中
a).如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。
当被设置元素为块状元素时用 text-align:center 并达不到居中的效果。分为定宽块状元素和不定宽块状元素两种情况。
b).定宽块状元素,对其板块本身进行设置:
width:500px;
margin:20px auto;
c).不定宽块状(这是最常遇到的情况),可以细分为3个小方法:
第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
垂直居中
a).父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
height:100px;
line-height:100px;
b).父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:
标签:
原文地址:http://www.cnblogs.com/daiyu/p/4703185.html