你如何让每一个文字完美地显示在图像的中心？

Question

看每一个文字都显示在图片下方。我希望每一个文字都能完美的显示在图片的中央。

代码如下： https://jsfiddle.net/Krzysiek_35/Ljybwz97/37/

body {
  left: 8%;
  top: 10%;
  position: absolute;
  background-color: #6699cc;
}

.box3 {
    background-color: #191919;
    position: absolute;
    padding: 15px 40px 15px;
    font-size: 12px;
    color: #DDDDDD;
    font-family: Verdana;
    font-size: 12px;
    width: 400px;
}

.box3 > li {
    display: block;
}

.box3 > li span {
    display: inline-block;
    vertical-align: middle;
}

<body>
  <div class="box3">      
    <li>
      <img src="pictures/contact/skype.png" width="34px" height="34px" />
      <span>Skype name</span>
    </li>        
    <li>
      <img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
      <span>Gadu-Gadu number</span>
    </li>        
    <li>
      <img src="pictures/contact/email.png" width="34px" height="34px" />
      <span>Email address</span>
    </li>        
  </div>      
</body>

如何让每个文字都完美地显示在图片的中央？

我将非常感谢有效的帮助。

Answer 1

将 vertical-align: middle 设置为 img:

body
{
 left: 8%;
  top: 10%;
  position: absolute;
  background-color: #6699cc;
}

.box3
{
 background-color: #191919;
 position: absolute;
 padding: 15px 40px 15px;
 font-size: 12px;
 color: #DDDDDD;
 font-family: Verdana;
 font-size: 12px;
 width: 400px;
}

.box3 > li
{
 display: block;
}

.box3 > li span
{
 display: inline-block;
 vertical-align: middle;
}

.box3 img{
    vertical-align: middle;
}

<body>

 <div class="box3">
  
  <li>
   <img src="pictures/contact/skype.png" width="34px" height="34px" />
   <span>Skype name</span>
  </li>
    
  <li>
   <img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
   <span>Gadu-Gadu number</span>
  </li>
    
  <li>
   <img src="pictures/contact/email.png" width="34px" height="34px" />
   <span>Email address</span>
  </li>
    
 </div>
  
</body>

Answer 2

.box3 > li {
  display: flex;
  align-items: center;
}

Answer 3

你也可以用这个

.box3 > li span
{
display: inline-block;
vertical-align: middle;
margin-top:-30px;
}

你如何让每一个文字完美地显示在图像的中心？

How do you make every text display perfectly in the center of the image?

html

css

centering