如何将div中的文本水平居中，左边的图像与垂直对齐的中间

Question

https://jsfiddle.net/2ppdwqu0/

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

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 because I want horizontal not vertical alignment.

Answer 1

You need this. You may change the span to inline-block type and you can make a text-align: center perfectly.

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> 

Answer 2

You can do this 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> 

Answer 3

Here display:table and display:table-cell can do the trick.

 .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> 

Working Fiddle

Answer 4

You can do this (without setting a width to the text element) :

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