龙空技术网

技术专栏-CSS居中

浮生偷闲 101

前言:

如今小伙伴们对“css怎么把文字向左移动”大体比较关注,我们都想要分析一些“css怎么把文字向左移动”的相关知识。那么小编同时在网摘上汇集了一些对于“css怎么把文字向左移动””的相关内容,希望同学们能喜欢,同学们快快来了解一下吧!

内容导读

1. 最好不使用定位方式,因为它对整体的布局影响很大。

一:元素水平居中

1. 定宽时,margin方式,必须满足的条件

被居中的元素宽固定

元素是块级元素或者设置为display:inline-block|block

元素的左右margin设为auto

2. 定宽时,定位方式,必须满足的条件

元素宽固定

元素绝对定位,left为50%

元素的margin-left为元素宽的一半(负值)

适用于垂直居中,将margin-top设为高的一半

水平垂直居中时,将这两个组合起来即可

3. 不定宽时,定位方式,必须满足的条件

用css3的transform:translate,让它自己向上向左移动自身宽高的一半

IE9+

4. 文字水平居中

单行文字用text-align:center

多行文字参照块居中

5. flex布局

justify-content实现主轴居中

aign-items实现交叉轴居中

结合使用实现水平垂直居中

举个栗子

如果块级元素中的行内元素inline | 行内块元素inline-block | inline-table | inline-flex 居中或者文字居中,用text-align:center

<div class="center"><span>inline hello world</span></div>.center{ width: 500px; height: 200px; border: 1px solid #000; text-align: center;}

定宽的块级元素,用margin:0 auto

<div class="center"> <div class="block">block hello</div></div>.center{ width: 500px; height: 200px; border: 1px solid #000;}.block{ width: 200px; border: 1px solid #00f; // 整个块相对于父元素center居中 margin: 0 auto;}

不定宽的块状元素水平居中

// 给该不定宽的元素设置为inline-block,父元素用text-align:center;也适用于定宽的情况.center{ width: 500px; height: 200px; border: 1px solid #000; text-align: center;}.block{ border: 1px solid #00f; display: inline-block;}

定宽元素定位方式水平居中

.center{ width: 500px; height: 200px; border: 1px solid #000; position: relative;}.block{ width: 200px; border: 1px solid #00f; position: absolute; left: 50%; margin-left: -100px;}
二:元素垂直居中

1. 定位方式,与水平方式类似

transform:translate(0,-50%)即可

2. 单行文本垂直

将文本的line-height设置父元素的高度

3. 在不考虑浏览器兼容性问题时,用flex布局是最好的

容器flex布局

项目的margin为auto

举个栗子

单行文本垂直居中

<div class="center"><span>inline hello world</span></div>.center{ width: 500px; height: 200px; border: 1px solid #000;}span{ line-height: 200px;}

定高时,定位方式,垂直居中

.center{ width: 500px; height: 200px; border: 1px solid #000; position: relative;}.block{ width: 200px; height: 100px; border: 1px solid #00f; position: absolute; top:50%; margin-top: -50px;}
三:水平垂直居中

水平垂直居中实际上是水平居中和垂直居中的结合,单独拆分开可以实现某个方位的居中

举个栗子

flex布局,水平垂直布局

// justify-content和align-items结合使用,实现水平垂直布局.center{ width: 500px; height: 200px; border: 1px solid #000; display: flex; // 1. 主轴方向,水平居中 justify-content: center; // 2. 交叉轴方向,垂直居中 align-items:center; // 3. 两者结合,水平垂直居中}

flex布局,水平垂直居中

.center{ width: 500px; height: 200px; border: 1px solid #000; display: flex;}.block{ width: 200px; height: 100px; border: 1px solid #00f; // 1. 每个项目的margin设置为auto,实现水平垂直居中 margin: auto; // 2. 水平居中 margin : 0 auto; // 3. 垂直居中 margin : auto 0;}

定宽高时,绝对定位实现水平垂直居中,常用于弹出框

.center{ width: 500px; height: 200px; border: 1px solid #000; position: relative;}.block{ width: 200px; height: 100px; border: 1px solid #00f; position: absolute; top: 0; left:0; bottom: 0; right: 0; margin: auto;}

不定宽高时,水平垂直居中,定位方式,transform

.center{ width: 500px; height: 200px; border: 1px solid #000; position: relative;}.block{ border: 1px solid #00f; position: absolute; // 1. 单独设置left,translate(-50%,0)即可实现水平居中 // 2. 单独设置top,translate(0,-50%)即可实现垂直居中 left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -0-transform:translate(-50%,-50%); transform: translate(-50%,-50%);}
四:总结

1. 最好不使用定位方式,因为它对整体的布局影响很大。

2. 不考虑兼容性时,用flex布局

3. 元素被放置在半像素位置时,用transform-style:preserve-3d解决

标签: #css怎么把文字向左移动