84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
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