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

Question

I have this sample:

link

CODE 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;
}

Image width and height will vary ... he should always be in the middle

I tried to align text center but not working...

Text must be aligned both horizontally and vertically.

Can you help me to solve this problem please?

Thanks in advance!

Answer 1

Try the following CSS:

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

Before, you had top: 0; which means to show the div in the 0 pixels from main port. If you want to change bring the text in the middle of it then change the value for top CSS property. If the Image and Div are not the first elements on your page, then I suggest to use margin instead of top property.

Answer 2

Try this code ( 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%);
}

Source: https://css-tricks.com/centering-css-complete-guide/