Question

我希望文本位于顶部，中间的段落，我尝试移动它，但每次添加边距底部都会增加背景图像的大小。如果我使用任何其他财产，那么它不会移动文本，请帮助，谢谢！

＆＃13;

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    text-align: center;
    font-family: Elephant, sans-serif;
  }

 img {
    max-width: 100%;
  }

  a {
    text-decoration: none;
  }
  
  
  
   /* ====== About ====== */

 #about {
   max-width: 100%;
   background-size: cover;
   background-position: center;
   background-image: url(https://i.imgur.com/zpwqaEG.jpg);
   padding: 350px 0;
 }

  .aboutHead {
    display: inline-block;
    font-size: 64px;
    font-style: italic;
    color: #fff;
    border-bottom: 2px solid #993b3b;


  }

＆＃13;

<section id="about">
        <h1 class="aboutHead">Our Focus</h1>
        <p class="about1">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p class="about2">
          Nullam ultrices euismod suscipit. Integer vitae massa quam.
          Maecenas tristique vitae mi sit amet rutrum.
          Etiam fringilla justo vitae felis tempus volutpat.
          Phasellus urna ante, porttitor iaculis mattis id, suscipit ul
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
   </section>

＆＃13;

Answer 1

试试这个。

  <section id="about">
        <h1 class="aboutHead">Our Focus</h1>
    <div class="cdesc">
        <p class="about1">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p class="about2">
          Nullam ultrices euismod suscipit. Integer vitae massa quam.
          Maecenas tristique vitae mi sit amet rutrum.
          Etiam fringilla justo vitae felis tempus volutpat.
          Phasellus urna ante, porttitor iaculis mattis id, suscipit ul
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div>
   </section>

样式表

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: Elephant, sans-serif;
  }

 img {
    max-width: 100%;
  }

  a {
    text-decoration: none;
  }

.cdesc {
  padding:350px 0;
}

   /* ====== About ====== */
.about1 {

}

 #about {
   text-align:center;
   max-width: 100%;
   background-size: cover;
   background-position: center;
   background-image: url(https://i.imgur.com/zpwqaEG.jpg);
 }

  .aboutHead {
    position:relative;
    top:0px;
    font-size: 64px;
    font-style: italic;
    color: #fff;
    border-bottom: 2px solid #993b3b;

Answer 2

您是否尝试过使用css Flex？下面是我的简单弹性框代码，使顶部的顶部和段落居中？

.img-div { 

    display: flex;
    flex-direction: column;
    align-items: center;
    ...

}

.paragraph-div {

    margin: auto

}

我的代码

https://codepen.io/ShadowLegend/pen/eeYQrg

Answer 3

您也可以尝试此解决方案。我刚刚为pragraph添加了绝对定位的包装器，使它们在该部分的中心对齐。请检查一下，也许这个解决方案符合您的需求。

无论如何，它不是一个非常统一的解决方案，因为如果你减少浏览器大小，绝对定位的包装器可能会与页面上的其他元素重叠。

.paragraphs {
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
 }

DEMO Codepen

如何在不增加图片大小的情况下移动文本

3 个答案: