Rumah > hujung hadapan web > tutorial css > CSS控制元素对齐的技巧

CSS控制元素对齐的技巧

无忌哥哥
Lepaskan: 2018-06-28 17:29:36
asal
2340 orang telah melayarinya

父元素一定是块元素,根据子元素不同分为以下几种:

1.子元素是行内元素:如:a,span

a.水平居中:在父元素上设置: text-align:center;

b.垂直居中:在行内子元素上设置行高与父元素相同: line-height

.box1 {
			width: 200px;
			height: 200px;
			background-color: #FFFF0A;
			text-align: center;  /*可以使内部行内元素水平居中*/
		}
		.box1 a {
			line-height: 200px;  /*子元素设置行高与父元素高度相同*/
		}
<div class="box1">
     <a href="">PHP中文网</a>
</div>
Salin selepas log masuk

2. 子元素是多行内联文本

a.水平居中:父元素设置text-align:center

b.垂直居中:父元素设置:display:table-cell;vertical-align:middle

.box2 {
			width: 200px;
			height: 200px;
			background-color: #FC0107;
			text-align: center;  /*可以使内部多行行内元素水平居中*/
			/*以下二个声明可以使多行文本垂直居中*/
			display: table-cell;  /*设置显示方式为表格单元格*/
			vertical-align: middle; /*设置该单元格内的元素垂直居中*/
		}
<div class="box2">
<span>php中文网</span><br>
<span>www.php.cn</span>
</div>
Salin selepas log masuk

3. 子元素是块元素:

a.水平居中:子元素设置左右自动: margin: auto;

b.垂直居中:与多行内联文本处理方式一致:display:table-cell;vertical-align:middle

.box3 {
			width: 200px;
			height: 200px;
			background-color: #66CCFF;
			/*以下二个声明可以使块级子元素垂直居中*/
			display: table-cell;  /*设置显示方式为表格单元格*/
			vertical-align: middle; /*设置该单元格内的元素垂直居中*/			
		}
		.box3 .child {
			width: 100px;
			height: 100px;
			background-color: #F4FF0A;
			margin: auto;  /*水平居中*/
		}
<div class="box3">
<div class="child"></div>
</div>
Salin selepas log masuk

4. 子元素是不定宽的块元素:最常见的分页导航

a.水平居中:子元素转行内元素,父元素加:text-align:center

b.垂直居中:可给分页的ul加行高line-height=parent.height

c.底边居中:更为常用,与多行内联文本垂直处理方式一致,vertical-align:bottom;

.box4 {
			width: 200px;
			height: 200px;
			background-color: #FD6FCF;
			text-align: center;  /*可以使行内元素水平居中*/
			/*以下二个声明可以使块级子元素垂直居中*/
			display: table-cell;  /*设置显示方式为表格单元格*/
			vertical-align:bottom; /*设置该单元格内的元素底边居中*/	
		}
		.box4 ul {
			margin: 0;
			padding: 0;
			/*line-height: 200px;*/
		}
		.box4 li {
			list-style: none;
			display: inline;
		}
<div class="box4">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
Salin selepas log masuk

Atas ialah kandungan terperinci CSS控制元素对齐的技巧. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan