需要居中對齊的文本和圖像

Question

我正在做一個引導項目，我需要一個文本和圖像，看起來類似於之前在鏈接下提出的問題：

如何使用 CSS 在 DIV 中垂直對齊圖像和文本？

另外，我有一個固定高度為 550px 的背景橫幅。 我正在嘗試使用引導程序創建它，並且還嘗試使用 Display: table 、 display: table-cell、vertical-align: middle; 屬性，但如果不將 height:550px 放在包含文本和圖像的兩個 div 上，我似乎無法正確使用。

 .overview-banner { background: url(../img/overview/overview-bg.jpg) no-repeat center center; background-size: cover; height: 550px; .display-table{ display: table; } .verticle-center{ display: table-cell; vertical-align: middle; }

 <section class="overview-banner"> <div class="container-fluid"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="display-table" style="height:550px;"> <div class="verticle-center" style="height:100%"> <h1>The Multi-Faceted Simpuite</h1> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="display-table" style="height:550px;"> <div class="verticle-center" style="height:100%"> <img src="{{ STATIC }}assets/img/overview/overview-banner.png" alt="Multi Faceted Simpuite" class="img-responsive img-center-xs"> </div> </div> </div> </div> </section>

我想在編碼中不使用太多高度的情況下獲得結果。

此外，我希望它在出現在移動設備中時能夠響應。

請告知是否有任何其他方法可以進行引導，該方法可以響應並且具有根據橫幅高度 550px 居中的文本和圖像，並且無需經常提及高度。

Answer 1

有一個小錯誤，你錯過了第一個 CSS 聲明中的結束} ，這使得整個 CSS 過時了。 並且也考慮給一個text-align: center 。 您並不完全需要在此處指定height 。 你可以這樣使用：

 .overview-banner { background: url(../img/overview/overview-bg.jpg) no-repeat center center; background-size: cover; } .display-table{ display: table; } .verticle-center{ display: table-cell; vertical-align: middle; text-align: center; }

 <section class="overview-banner"> <div class="container-fluid"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="display-table"> <div class="verticle-center"> <h1>The Multi-Faceted Simpuite</h1> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="display-table"> <div class="verticle-center"> <img src="{{ STATIC }}assets/img/overview/overview-banner.png" alt="Multi Faceted Simpuite" class="img-responsive img-center-xs"> </div> </div> </div> </div> </section>

Answer 2

您嘗試支持哪些瀏覽器？ 如果它是最新的，那么我建議你使用“display:flex”； 瀏覽器支持

<div class="align">
    <div class="align-item">
         <img src="http://lorempixel.com/400/200/">
    </div>
 </div>

 <style>
 html,body {
   width:100%;
   height:100%;
 }

 .align {
   width:100%;
   height:100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .align-item {
   max-width: 50%;
 }
 </style>

http://codepen.io/richardhealy/pen/zGwbLz