如何對齊文本以使該圖像居中？

Question

我有這個樣本：

鏈接

代碼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：

.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處顯示div。 如果要更改，請在文本中間添加文字，然后更改top CSS屬性的值。 如果Image和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/