84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
html如下:
<header class="header"> <span class="logo"> <img src="img/baidu.png"/> </span>
CSS中为什么我在<header>和<span>中设置了vertical-align:middle;都不会使图片产生居中效果,而用设置为表格的方式才能生效,
新手真心求问~?
欢迎选择我的课程,让我们一起见证您的进步~~
header没有闭合吧,
解决方法如下 在img前面加一个span
<p> <span></span> <img src="img/star.png" alt=""> </p>
给span设置属性
span{ height:100%; display:inline-block; vertical-align:middle; } p{ border:1px solid #333; width:500px; height:400px; text-align:center; } img{ vertical-align:middle; }
vertical-align 的是根据元素的基线baseline与父元素的基线来计算的,是相对于元素本身所处的行来说的,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.
vertical-align
baseline
<p class="parent"> <span class="child"> 123456 <img class="middle" src="xxx" /> </span> </p> <style> .middle { vertical-align: middle; } </style>
此时你将 .child 设置为行内块级元素,然后对其设置高度,这个高度并不是img本身的所在行的行高,所有在这种情况下是不会实现你想要的效果的。不管.child是否设了高度,img的vertical-align只相对自己所在行。
.child
img
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box. -- MDN 当然inline-block也是可以的。
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box. -- MDN
inline
table-cell
当然inline-block也是可以的。
inline-block
栗子plunker
vertical-align:middle 使子元素居中,只能在表格单元或者元素display属性设置为table-cell 生效。 这里有个视频教程可以解决你的疑惑。http://www.imooc.com/learn/542
要在span中设置display:table-cell
header没有闭合吧,
解决方法如下 在img前面加一个span
给span设置属性
vertical-align
的是根据元素的基线baseline
与父元素的基线来计算的,是相对于元素本身所处的行来说的,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.此时你将
.child
设置为行内块级元素,然后对其设置高度,这个高度并不是img本身的所在行的行高,所有在这种情况下是不会实现你想要的效果的。不管.child
是否设了高度,img
的vertical-align
只相对自己所在行。栗子
plunker
vertical-align:middle 使子元素居中,只能在表格单元或者元素display属性设置为table-cell 生效。 这里有个视频教程可以解决你的疑惑。http://www.imooc.com/learn/542
要在span中设置display:table-cell