How to center text in div horizontally with image on left with vertical center alignment

Question

https://jsfiddle.net/2ppdwqu0/

As you can see in this fiddle, the names are aligned to the left. But I want them to be centered horizontally, so there is an image and beautiful text with the center.

HTML:

<div class='designers'>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum consequatur nihil enim dolor voluptatibus nostrum libero, nobis quos animi quidem commodi veniam delectus, accusamus, vitae odit autem suscipit. Pariatur, similique.</p>
    <ul>
        <li>
            <img alt='' src='https://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif'>
            <span>Abdullah Shahbaz</span>
        </li>
        <li>
            <img alt='' src='https://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif'>
            <span>Umer Javed</span>
        </li>
        <li>
            <img alt='' src='https://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif'>
            <span>Ali Qureshi</span>
        </li>
    </ul>
</div>

CSS:

.designers ul {
    overflow: hidden;
    list-style: none
}

.designers li {
    border: 1px solid grey;
    float: left;
    margin: 10px;
    box-shadow: 0 0 1px black;
    width: 250px
}

.designers img {
    vertical-align: middle;
    width: 70px;
    height: 70px;
}

.designers span {
    margin: 0 10px;
    font-size: 16px;
    font-family: Open Sans;
    font-weight: bold;
}

My question is different from the fact that I want horizontal alignment vertically.

Answer 1

You need it. You can change the range to inline-block, and you can do text-align: centerfine.

https://jsfiddle.net/2ppdwqu0/1/

.designers ul {
  overflow: hidden;
  list-style: none
}

.designers li {
  border: 1px solid grey;
  float: left;
  margin: 10px;
  box-shadow: 0 0 1px black;
  width: 250px
}

.designers img {
  vertical-align: middle;
  width: 70px;
  height: 70px;
}

.designers span {
  width: 170px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 16px;
  font-family: Open Sans;
  font-weight: bold;
}

<div class='designers'>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum consequatur nihil enim dolor voluptatibus nostrum libero, nobis quos animi quidem commodi veniam delectus, accusamus, vitae odit autem suscipit. Pariatur, similique.</p>
  <ul>
    <li>
      <img alt='' src='https://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif'>
      <span>Abdullah Shahbaz</span>
    </li>
    <li>
      <img alt='' src='https://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif'>
      <span>Umer Javed</span>
    </li>
    <li>
      <img alt='' src='https://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif'>
      <span>Ali Qureshi</span>
    </li>
  </ul>
</div>

Run codeHide result

Answer 2

You can do it with Flexbox.

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

li {
  display: flex;
  border: 1px solid black;
  margin: 10px;
  flex: 250px;
  align-items: center;
  justify-content: center;
}

li img {
  margin-right: auto;
  height: 70px;
}

li span {
  margin-right: auto;
  text-align: center;
}

<ul>
   <li>
      <img alt='' src='https://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif'>
      <span>Lorem ipsum</span>
   </li>
   <li>
      <img alt='' src='https://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif'>
      <span>Lorem</span>
   </li>
   
   <li>
      <img alt='' src='https://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif'>
      <span>Lorem ipsum dolor</span>
   </li>
</ul>

Run codeHide result

Answer 3

display:table display:table-cell .

.designers ul {
  overflow: hidden;
  list-style: none
}

.designers li {
  border: 1px solid grey;
  display: table;
  margin: 10px;
  box-shadow: 0 0 1px black;
  width: 250px
}

.designers img {
  vertical-align: middle;
  width: 70px;
  height: 70px;
  display: table-cell;
}

.designers span {
  font-size: 16px;
  font-family: Open Sans;
  font-weight: bold;
  display: table-cell;
  width: 100%;
  text-align: center;
}

<div class='designers'>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum consequatur nihil enim dolor voluptatibus nostrum libero, nobis quos animi quidem commodi veniam delectus, accusamus, vitae odit autem suscipit. Pariatur, similique.</p>
  <ul>
    <li>
      <img alt='' src='https://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif'>
      <span>Abdullah Shahbaz</span>
    </li>
    <li>
      <img alt='' src='https://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif'>
      <span>Umer Javed</span>
    </li>
    <li>
      <img alt='' src='https://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif'>
      <span>Ali Qureshi</span>
    </li>
  </ul>
</div>

Hide result

Answer 4

( ):

CSS

.designers ul {
  overflow: hidden;
  list-style: none
}

.designers li {
  border: 1px solid grey;
  float: left;
  margin: 10px;
  box-shadow: 0 0 1px black;
  width: 250px;
  position: relative;
}

.designers img {
  vertical-align: middle;
  width: 70px;
  height: 70px;
  float:left;
}

.designers span {
  margin: 0 10px;
  font-size: 16px;
  font-family: Open Sans;
  font-weight: bold;
  text-align: center;
  position: relative;
  margin-left: 80px;
  display: block;
  line-height: 4.2em;
}

DEMO HERE