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

Question

Look that every text is displayed below the picture. I would like every text to be displayed perfectly in the center of the picture.

Here is the code: 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>

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

I will be very grateful for effective help.

Does this answer your question? [CSS center text (horizontally and vertically) inside a div block](https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block) — Newbyte, May 30 '20 at 08:16

score 0 · Answer 1 · answered May 30 '20 at 08:07

Set vertical-align: middle to 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>

score -1 · Accepted Answer · answered May 30 '20 at 08:08

-1

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

answered May 30 '20 at 08:08

vadimk7

6,559
1
12
15

score -1 · Answer 3 · answered May 30 '20 at 08:18

-1

you can use this also

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

answered May 30 '20 at 08:18

Parth Mehta

64
6

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

3 Answers3