在图像上对齐文本

Question

我需要在图像上对齐标题文本。

到目前为止，由于我使用了相对定位、绝对定位和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>

Answer 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>