对齐图像上的文本

Question

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

到目前为止，它正在使用，因为我使用了相对，绝对定位和z-index的组合，但我需要根据页面中的内容将标题文本对齐到特定位置。

.container是bootstrap类 我的页面中的内容也在容器类+内部，并且它拥有自己的类.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

试试这个： -

＆＃13;

＆＃13;

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

h2 { 
   position: absolute; 
   top: 200px; 
 
   width: 100%; 
  text-align:center;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 或

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;