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>

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中显示div。如果要更改将文本置于其中间，请更改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/

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

2 个答案: