Как выровнять текст, чтобы центрировать это изображение?

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;, что означает, чтобы показать DIV в 0 pixels от главного порта. Если вы хотите изменить, введите текст в середине, а затем измените значение для свойства CSS top. Если изображение и 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/