行/块级元素的文本居中

1.问题引入：

为什么样式对文本位置没有起任何作用？加上display: table-cell; 就可？

<label id="lb-file-choose">Choose images to upload (PNG, JPG)</label>

样式

#lb-file-choose{
	width:600px;
	height: 100px;
	text-align:center;
	background:#9d9dd3;
	vertical-align:middle;	
}

2.原因：

DOM 中的元素内元素和块级元素。样式中有的元素属性只能用于块级元素，有的用于行内元素。text-align 用于块级元素

行内元素（a,b,br,em,font,i,img,input,label,select,small,span,strike,strong）：

a.不占据整行，随内容而定：不可以设置宽高，也不可设置行高

b.内联元素可以设置外边界，但是对外边界的上下不起作用，只对左右起作用

也可以设置内边界，但是内边界ie6 也不对上下作用，只能对左右作用

扩展：

*1.行内元素是有盒子模型的，但是margin,padding对应的bottom,top是无效的对行内元素，但是left or right 是有效的

*2.vertical-align用于行内元素中的垂直居中，文字在层(块级元素)中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!

*3.在块的高度不确定的情况下，其实它的高度就是取决于里面内容的高度。如果内部只有文字或者图片的话，那就自然垂直居中了，其实就不必特意要设置。

没有明确设定宽度的block，根据块级元素的性质，它默认是独占一行的，所以这个时候block本身就是浏览器窗口的宽度，就不必要来设置水平居中

块级元素（div,dl,dt,dd,form,h1,hr,p,ul,ol):

a.新行总是占据一整行

b.高度，行高以及外边距和内边距都可控制

c.宽度始终与浏览器宽度一样，与内容无关

d.它可以容纳内联元素和其他块元素

3.解决方案：

样式中加入display: table-cell;使用display 设置可以使得行内元素和块级元素之间相互转换。

link: https://www.cnblogs.com/huchong/p/7875127.html

https://www.cnblogs.com/clj2017/p/9293363.html

来源：https://www.cnblogs.com/Spring-Rain/p/11966688.html

标签