如何对齐文本以使该图像居中？

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>

代码 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/