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.
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>
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>
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>
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.