如何对齐文本水平中心的图片下方

我正在使我的页面响应屏幕大小（最大宽度：991px）到（最小宽度：768px）。在这里，我有一个图片和它下面的一些文字，我希望它可以在中心水平对齐： -如何对齐文本水平中心的图片下方

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

来源

2017-02-17 Utkarsh Gautam

text-align: center将围绕文本和内联元素

注意，它不与内部spanp元素允许的，所以我改变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>

来源

2017-02-17 07:00:01 LGSon

对于屏幕sizw 768px它的作品，但对于991px文本左移一点。 –

@UkkhhGautam然后你需要发布这些规则，因为一个做一些其他不 – LGSon

我给宽度：100％，以.name_titles类，然后它完美的作品。 –

嗯，你可以很容易地做到这一点当然是有CSS。

.name_titles { 
    text-align:center; 
}

来源

2017-02-17 06:59:23 Aj334

如果你想在中心和文字下方，以使图像也对齐到中心然后使用 -

<div class="col-lg-2 pictures_titles" style="text-align:center;"> 
      <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> 
      <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>

来源

2017-02-17 07:06:32 Parth

我会避免使用内联CSS尽可能多。相反，告诉'pictures_titles'类来居中文本。 –

你可以创建class-text-align：center;并可以使用该类而不是内联css。优点是你可以在其他地方使用它。 – Parth

确切地;）由于他使用col-lg-2，我假定他正在使用已经拥有这个类的Bootstrap。但是，如果你有多个图片标题，那么最好将它设置在类别 –

如何对齐文本水平中心的图片下方

回答

相关问题