【问题标题】:How to move whole text on the image to right side without moving the image position?如何在不移动图像位置的情况下将图像上的整个文本移动到右侧?
【发布时间】:2021-04-16 04:43:21
【问题描述】:

四处搜索,但找不到我需要的答案,我很好。还在学习。希望有人可以帮助我。

例如,现在我的学习网站上显示的问题是:

我现在的问题 标题和整个段落在图像的左侧...

我希望将标题和整段内容移动到右侧而不移动图像上的位置以获得此结果:

我想得到这个结果

这是原始代码:

.intro-section {
  color: #fff;
  position: relative;
  z-index: 17;
  padding: 80px 0;
  margin-top: -86px;
  background: url(../images/img.jpg) no-repeat top center;
  background-size: cover;
}
.intro-section h3 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 24px;
}
.intro-section .image-holder {
  margin-top: 50px;
  overflow: hidden;
}
<div class="intro-section">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1>  title </h1>
        content paragraph xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      </div>
    </div>
  </div>
</div>

希望能在这里得到答案,谢谢你的帮助。

【问题讨论】:

    标签: html css


    【解决方案1】:

    col-md-6 上添加此类col-md-offset-6

     <div class="intro-section">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-md-offset-6">
                            <h1>  title </h1>
        
                         content paragraph xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                         xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                         xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                    </div>
               </div>
          </div>
     </div>
    

    【讨论】:

    • 哇,按照你的方式,它的工作完美,我得到了我想要的结果,非常感谢????
    【解决方案2】:

    您可以将 img 放在单独的 div 中,将文本放在另一个中,然后使用 text-align 属性并设置为 center,它将使文本居中对齐,然后您可以将该 img 放置在您想要的任何位置

    【讨论】:

    • 谢谢,Mr.Lalji 已经教我得到结果了 :)
    猜你喜欢
    • 2021-04-30
    • 2022-11-17
    • 1970-01-01
    • 2020-12-25
    • 2023-03-21
    • 2013-11-05
    • 1970-01-01
    • 2022-10-04
    • 2019-04-10
    相关资源
    最近更新 更多