如何對齊文本水平中心的圖片下方

我正在使我的頁面響應屏幕大小（最大寬度：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。但是，如果你有多個圖片標題，那麼最好將它設置在類別 –

如何對齊文本水平中心的圖片下方

回答

相關問題