span内图片元素如何垂直居中

Posted 2023-04-17

<span style="width:500px;height:500px">
<img src=""/>
</span>
使图片居中表示

首先span是内联元素，你给它加宽度和高度是无效的，除非给他加上display：block，然后要居中就写个text-align:center;这样水平居中，然后你再调span的padding-top追问

你试过么 宽高不好使 就回答我?

参考技术A 首先span要改成块级(display:block),然后img垂直居中(vertical-align:middle) 参考技术B <span style="width:500px; height:500px; background:#EFEFEF; display: table-cell; line-height:500px; vertical-align:middle">
<img src="xxx.jpg" />
</span>

你试下吧

二十：让行内元素在div中垂直居中

（1）使用display:table-cell配合vertical-align:center（淘宝也是这样用的）

<div class="method4">
  <span>第四种方法</span>
</div>


<style>
.method4 {
  width: 200px;
  height: 200px;
  vertical-align: middle;
  display: table-cell;  /*只支持IE8+及现代浏览器，与position:absolute;或float:left;属性尽量不一起用*/
  text-align: center;
  background-color:#00ACED;
}
.method4{
  width:100px;
  height:100px;
  background-color:#0A58A0;
}
</style>