css学习总结】实现垂直水平居中的5种办法-天涯论坛

wloe2gf 发表于 2024-6-30 05:46:15

css学习总结】实现垂直水平居中的5种办法

在编写HTML页面时，咱们会对文本、照片等等必须居中表示的时候，通常都是单独运用水平居中或垂直居中，可是今天给大众讲讲<a style="color: black;">css教程</a>
中的水平垂直同期居中的办法，一共有5种思路，此刻分享给大众：
　水平居中和垂直居中已然单独介绍过，本文将介绍水平垂直同期居中的5种思路
思路一:text-align + line-height实现单行文本水平垂直居中
<style>
.test{
 text-align: center;
line-height: 100px;}</style>
<div class="test" style="bac公斤round-color: lightblue;width: 200px;">测试文字</div>
思路二: text-align + vertical-align
【1】在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素
[重视]若兼容IE7-浏览器，将结构改为<table>结构来实现table-cell的效果；用display:inline;zoom:1;来实现inline-block的效果
<style>
.parent{
 display: table-cell;
 text-align: center;
 vertical-align: middle;}
.child{
display: inline-block;}</style>
<div class="parent" style="bac公斤round-color: gray; width:200px; height:100px;">
<div class="child" style="bac公斤round-color: lightblue;">测试文字</div></div>
【2】若子元素是图像，可不运用table-cell，而是其父元素用行高替代高度，且字体体积设为0。子元素本身设置vertical-align:middle
<style>
.parent{
 text-align: center;
line-height: 100px;
 font-size: 0;}
.child{
 vertical-align: middle;}</style>
<div class="parent" style="bac公斤round-color: gray; width:200px; ">
 <img class="child" src="<a style="color: black;">http://</a>www.maiziedu.com/uploads/rs/26/ddzmgynp/img1.gif
" width="50%" alt="test"></div> 
思路三: margin + vertical-align
想要在父元素中设置vertical-align，须设置为table-cell元素；想要让margin:0 auto实现水平居中的块元素内容撑开宽度，须设置为table元素。而table元素是能够嵌套在tabel-cell元素里面的，就像一个单元格里能够嵌套一个表格
　　[重视]若兼容IE7-浏览器，需将结构改为<table>结构
<style>
.parent{
display:table-cell;
 vertical-align: middle;}
.child{
 display: table;
 margin: 0 auto;}</style>
<div class="parent" style="bac公斤round-color: lightgray; width:200px; height:100px; ">
 <div class="child" style="bac公斤round-color: lightblue;">测试文字</div></div> 
思路四: 运用absolute
【1】利用绝对定位元素的盒模型特性，在偏移属性为确定值的基本上，设置margin:auto
<styl

页: [1]

天涯论坛's Archiver

css学习总结】实现垂直水平居中的5种办法