html - 如何水平对齐位于div中心的图片下方的文本

Question

我正在让我的页面响应屏幕尺寸(最大宽度:991 像素)到(最小宽度:768 像素)。这里我有一张图片和下面的一些文字我希望它在中心水平对齐:-

 <div class="col-lg-2 pictures_titles" >
                 <img class="team_img" src="../assets/img/Website-Png/About-Us-01-3.png">
                 <br><br>
                 <div class="name_titles">
                     <span id="namess" style="color:white;"><p> JAMES WILLIAMS </p></span>
                 <br>
                <span id="storys1" style="color:white;">
                     <p> An experienced strategist and entrepreneur, he is the Founder and Managing Director
                 of gorb.</p> </span>
                 </div>
            </div>

Answer 1

text-align: center 将文本和内联元素居中

请注意，span 中的 p 元素是不允许的，所以我将 span 更改为 div

.pictures_titles {
  background: gray;
  text-align: center;
}

<div class="col-lg-2 pictures_titles">
  <img class="team_img" src="http://placehold.it/300x150">
  <br><br>
  <div class="name_titles">
    <div id="namess" style="color:white;">
      <p> JAMES WILLIAMS </p>
    </div>
    <br>
    <div id="storys1" style="color:white;">
      <p> An experienced strategist and entrepreneur, he is the Founder and Managing Director of gorb.</p>
    </div>
  </div>
</div>

如果您希望文本位于图像的边界内，您可以这样做，使用 display: table-caption

body {
  background: gray;
}
.pictures_titles {
  display: table;
  margin: 0 auto;
  text-align: center;
}
.name_titles {
  display: table-caption;
}

<div class="col-lg-2 pictures_titles">
  <div class="name_titles">
    <img class="team_img" src="http://placehold.it/300x150">
    <br><br>
    <div id="namess" style="color:white;">
      <p> JAMES WILLIAMS </p>
    </div>
    <br>
    <div id="storys1" style="color:white;">
      <p> An experienced strategist and entrepreneur, he is the Founder and Managing Director of gorb.</p>
    </div>
  </div>
</div>