Html 如何使div中的文本水平居中，图像位于左侧，中间垂直对齐

正如你在这把小提琴中看到的，名字是左对齐的。但我希望它们水平居中对齐，这样就有一个图像和漂亮的居中文本

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>

---

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

你需要这个。您可以将span更改为

内联块

类型，并且可以使

文本对齐：居中

完美

.ul{
溢出：隐藏；
列表样式：无
}
李先生{
边框：1px纯灰；
浮动：左；
利润率：10px；
长方体阴影：0 1px黑色；
宽度：250像素
}
.img{
垂直对齐：中间对齐；
宽度：70px；
高度：70像素；
}
.设计师跨度{
宽度：170px；
显示：内联块；
垂直对齐：中间对齐；
文本对齐：居中；
字体大小：16px；
字体系列：开放式SAN；
字体大小：粗体；
}

Lorem ipsum dolor sit amet，奉献精英。自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心。帕里图尔，西米利克



阿卜杜拉·沙巴兹


乌默贾韦德


阿里·库雷希

您可以这样做（无需设置文本元素的宽度）：

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;
}

---

您可以使用Flexbox

ul{
列表样式类型：无；
显示器：flex；
证明内容：中心；
}
李{
显示器：flex；
边框：1px纯黑；
利润率：10px；
flex:250px；
对齐项目：居中；
证明内容：中心；
}
李英明{
右边距：自动；
高度：70像素；
}
李斯潘{
右边距：自动；
文本对齐：居中；
}

乱数假文


洛勒姆


同侧阴唇

这里的

显示：表格

和

显示：表格单元格

可以实现这一功能

.ul{
溢出：隐藏；
列表样式：无
}
李先生{
边框：1px纯灰；
显示：表格；
利润率：10px；
长方体阴影：0 1px黑色；
宽度：250像素
}
.img{
垂直对齐：中间对齐；
宽度：70px；
高度：70像素；
显示：表格单元格；
}
.设计师跨度{
字体大小：16px；
字体系列：开放式SAN；
字体大小：粗体；
显示：表格单元格；
宽度：100%；
文本对齐：居中；
}

Lorem ipsum dolor sit amet，奉献精英。自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心、自由之心。帕里图尔，西米利克



阿卜杜拉·沙巴兹


乌默贾韦德


阿里·库雷希

没有。我的情况不同。把问题再读一遍。虽然现在已经回答了。：）好吧，我不知道基本情况。请把问题标出来，如果你帮不上忙就离开。谢谢：）@DeepakYadav这是水平对齐，不是垂直对齐

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