如何將文字居中對齊此圖片？

Question

我有這樣的例子：

link

代碼HTML：

<div class="col-md-4 tab-bottom"> 
        <div class="tab-bottom-img"><img width="380" height="380" src="http://dg-design.ch/bagel/wp-content/uploads/2016/02/1-380x380.png" class="attachment-news wp-post-image" alt="1"> </div> 
         <div class="tab-bottom-content"> 
          SED PERSPICIATIS       <p>Sed ut perspiciatis unde omnis iste natus error sit<br> 
voluptatem accusantium doloremque laudantium,<br> 
totam rem aperiam, eaque ipsa quae ab illo inventore<br> 
veritatis et quasi architecto beatae vitae dicta sunt<br> 
explicabo.</p> 
         </div> 
       </div> 

CODE CSS：

.tab-bottom-content { 
    position: absolute; 
    text-align:center; 
    top: 0px; 
} 

圖像的寬度和高度會有所不同......他應該總是在中間

我試圖對齊文本中心，但沒有工作...

文本必須水平和垂直對齊。

你能幫我解決這個問題嗎？

在此先感謝！

Answer 1

試試下面的CSS：

.tab-bottom-content { 
    position: absolute; 
    text-align:left; 
    margin-top: -240px; 
    margin-left: 20px;; 
} 

之前，您必須top: 0;這意味着，顯示從主要港口在0 pixels股利。如果您想要更改文本的中間位置，請更改top CSS屬性的值。如果圖片和Div不是您網頁上的第一個元素，那麼我建議使用margin而不是top屬性。

Answer 2

試試這個代碼（https://jsfiddle.net/g6r8ayq1/1/）：

HTML

<div class="col-md-4 tab-bottom"> 
        <div class="tab-bottom-img"><img width="380" height="380" src="http://dg-design.ch/bagel/wp-content/uploads/2016/02/1-380x380.png" class="attachment-news wp-post-image" alt="1"> </div> 
         <div class="tab-bottom-content"> 
          SED PERSPICIATIS       <p>Sed ut perspiciatis unde omnis iste natus error sit<br> 
voluptatem accusantium doloremque laudantium,<br> 
totam rem aperiam, eaque ipsa quae ab illo inventore<br> 
veritatis et quasi architecto beatae vitae dicta sunt<br> 
explicabo.</p> 
         </div> 
       </div> 

CSS

* { 
margin: 0; 
padding: 0; 

} 
.tab-bottom { 
    position: relative; 
    width: 100%; 
    height: 400px; 
    background-color: red; 

} 
.tab-bottom-img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 

} 
.tab-bottom-content { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

來源：https://css-tricks.com/centering-css-complete-guide/