Выровнять текст по изображению

enter image description here Мне нужно выровнять текст заголовка над изображением.

Пока он работает, поскольку я использовал комбинацию относительного, абсолютного позиционирования и z-index, но мне нужно выровнять текст заголовка в определенной позиции, согласно содержанию на странице.

.container - это класс начальной загрузки.
Содержимое на моей странице также находится внутри класса контейнера + плюс у него есть собственный класс .article-view. Этот класс делится на .left-side(25%) и .right-side(75%)

Мне нужно выровнять текст заголовка (.article-heading) в том же горизонтальном положении, что и класс содержимого. .right-side.

С помощью этого кода мне удалось получить текст заголовка только в левой части контейнера

Спасибо вам за помощь! :)

мой HTML:

.article-banner {
  width: 100%;
  float: left;
  position: relative;
}
img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}
.article-heading {
  color: #fff;
  position: absolute;
  z-index: 10;
  float: left;
  width: 35%;
  top: 15%;
  margin-left: 0;
  padding: 15px;
  background-color: rgba(189, 189, 189, 0.4);
}
span {
  text-transform: uppercase!important;
}
h1 {
  font-weight: 100;
}
.article-view {
  width:100%;
  float:left;
  background:#fff;
  border-radius:10px;
  padding:20px 25px;
  margin-bottom:60px;
  margin-top:20px;
}
.left-side {
  width:25%;
  float:left;
  padding-right:30px;
  padding-left:10px;
  margin-top:30px;
}
.right-side {
  width:75%;
  float:left;
  padding-left:40px;
  padding-right:15px;
  font-size:16px;
  line-height:26px;
  min-height:420px;
  margin-top:10px;
  position:relative;
}
<div class="article-banner">
  <div class="container">
    <div class="article-heading">
      <span>october 2015</span>
      <h1>Heading text</h1>
    </div>
  </div>
  <img src="img.png">
</div>
0
источник поделиться
1 ответ

Попробуй это:-

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
 
   width: 100%; 
  text-align:center;
}
<div class="image">

      <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="" />
      
      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
или же

.article-banner {
  width: 100%;
  float: left;
  position: relative;
}
img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}
.article-heading {
  color: #fff;
  position: absolute;
  z-index: 10;
  float: left;
  width: 35%;
  top: 15%;
  margin-left: 0;
  padding: 15px;
  background-color: rgba(189, 189, 189, 0.4);
}
span {
  text-transform: uppercase!important;
}
h1 {
  font-weight: 100;
}
.article-view {
  width:100%;
  float:left;
  background:#fff;
  border-radius:10px;
  padding:20px 25px;
  margin-bottom:60px;
  margin-top:20px;
}
.left-side {
  width:25%;
  float:left;
  padding-right:30px;
  padding-left:10px;
  margin-top:30px;
}
.right-side {
  width:75%;
  float:left;
  padding-left:40px;
  padding-right:15px;
  font-size:16px;
  line-height:26px;
  min-height:420px;
  margin-top:10px;
  position:relative;
}
<div class="article-banner">
  <div class="container">
    <div class="article-heading">
      <span>october 2015</span>
      <h1>Heading</h1>
    </div>
  </div>
  <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
</div>
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос