html – 如何在div中水平居中文本,左边是垂直对齐的图像

概述https://jsfiddle.net/2ppdwqu0/ 正如你在这个小提琴中看到的那样,名字是左对齐的.但我希望它们水平居中对齐,以便有一个图像和美丽的居中文本. HTML： <div class='designers'> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum consequatur ni 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;}

我的问题不同,因为我想要水平而不是垂直对齐.

解决方法 你需要这个.您可以将范围更改为内联块类型,并且可以完全使用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,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>

总结

以上是内存溢出为你收集整理的html – 如何在div中水平居中文本,左边是垂直对齐的图像全部内容，希望文章能够帮你解决html – 如何在div中水平居中文本,左边是垂直对齐的图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。