[英]How to center text in the div horizontally with an image at left with vertical align middle
https://jsfiddle.net/2ppdwqu0/
正如你在这个小提琴中看到的那样,名字是左对齐的。 但我希望它们水平居中对齐,以便有一个图像和美丽的居中文本。
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;
}
我的问题不同,因为我想要水平而不是垂直对齐。
你需要这个。 您可以将范围更改为inline-block
类型,并且可以完全使用text-align: center
。
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>
您可以使用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>
这里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>
您可以这样做(不设置文本元素的宽度):
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.