如何购买域名和空间,比优化更好的词是,俄罗斯网站后缀,国都建设(集团)有限公司网站目录 1、水平居中1.1、行内元素1.2、块级元素 2、垂直居中2.1、单行文字2.2、多行文字2.3、图片垂直居中 3、水平垂直居中参考文章 1、水平居中
1.1、行内元素
行内元素#xff08;比如文字#xff0c;span#xff0c;图片等#xff09;的水平居中#xff0c;其父元素中… 目录 1、水平居中1.1、行内元素1.2、块级元素 2、垂直居中2.1、单行文字2.2、多行文字2.3、图片垂直居中 3、水平垂直居中参考文章 1、水平居中
1.1、行内元素
行内元素比如文字span图片等的水平居中其父元素中设置
text-align: center;示例
stylebody {background-color: #eeeeee;}.box {background-color: green;color: #fff;margin-top: 20px;}.box--center {text-align: center;}
/stylediv classbox两个黄鹂鸣翠柳一行白鹭上青天/divdiv classbox box--center两个黄鹂鸣翠柳一行白鹭上青天/div效果
1.2、块级元素
块级元素比如 div其默认宽度是100%。给定一个宽度的时候可以居中对齐
width: 50%;
margin: 0 auto;示例
stylebody {background-color: #eeeeee;}.box {background-color: green;height: 50px;}.box--center {width: 50%;margin: 0 auto;margin-top: 20px;}/stylediv classbox/divdiv classbox box--center/div实现效果
2、垂直居中
2.1、单行文字
对于单行文字居中可以设置父元素的行高来实现将其行高与元素高度设置为相同的值即可
height: 50px;
line-height: 50px;示例
stylebody {background-color: #eeeeee;}.box {background-color: green;color: #fff;margin-top: 20px;height: 50px;}.box--center {line-height: 50px;}
/stylediv classbox两个黄鹂鸣翠柳一行白鹭上青天/divdiv classbox box--center两个黄鹂鸣翠柳一行白鹭上青天/div2.2、多行文字
也适用于单行文字、行内元素
height: 200px;
display:table-cell;
vertical-align:middle;示例
stylebody {background-color: #eeeeee;display: flex;}.box {background-color: green;color: #fff;height: 200px;width: 130px;}.box--center {display: table-cell;vertical-align: middle;}.box-wrap {margin-left: 20px;}
/stylediv classbox两个黄鹂鸣翠柳一行白鹭上青天。/divdiv classbox-wrapdiv classbox box--center两个黄鹂鸣翠柳一行白鹭上青天。/div
/div2.3、图片垂直居中
上面的方法也可以让图片垂直居中
display: table-cell;
vertical-align: middle;示例
stylebody {background-color: #eeeeee;display: flex;}.box {background-color: green;color: #fff;height: 200px;width: 200px;}.box--center {display: table-cell;vertical-align: middle;}.box-wrap {margin-left: 20px;color: #fff;position: relative;}.image {width: 192px;height: 108px;vertical-align: middle;}.label {position: absolute;right: 0;top: 0;background-color: pink;padding: 0 4px;}
/stylediv classbox-wrapdiv classboximgclassimagesrchttps://cn.bing.com/th?idOHR.ViennaAutumn_ZH-CN7011999199_1920x1080.webpalt//divdiv classlabelbox/div
/divdiv classbox-wrapdiv classbox box--centerimgclassimagesrchttps://cn.bing.com/th?idOHR.ViennaAutumn_ZH-CN7011999199_1920x1080.webpalt/div classlabelbox--center/div/div
/div 3、水平垂直居中
使用绝对定位实现子绝父相子元素绝对定位父元素相对定位 .box-wrap--center {position: relative;}.box-wrap--center .box {position: absolute;left: 50%; /* x轴方向相对父元素的宽移动 50% */top: 50%; /* y轴方向相对父元素的高移动 50% */transform: translate(-50%, -50%); /* x轴、y轴方向相对自身元素的宽、高移动 -50% */}示例
stylebody {background-color: #eeeeee;display: flex;}.box-wrap {height: 300px;width: 300px;background-color: green;margin-right: 20px;}.box {background-color: pink;height: 100px;width: 100px;}.box-wrap--center {position: relative;}.box-wrap--center .box {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
/stylediv classbox-wrapdiv classbox/div
/divdiv classbox-wrap box-wrap--centerdiv classbox /div
/div参考文章
前端开发中的各种居中问题小小总结一下
