将文本限制为容器宽度并保持居中样式

时间：2018-08-30 07:24:39

标签： html css

我想创建一个类似example

的关于页面

我想我差不多了，我有一个可容纳4人的响应式容器

#about {
  background: #ffffff;
}

#aboutHeader {
  text-align: center;
}

#members {
  display: flex;
  flex-wrap: wrap;
}

#aboutAttracting {
  text-align: center;
  margin-top: 70px;
}

.memberContainer {
  width: 50%;
  display: flex;
  margin-top: 50px;
}

.memberFocus {
  width: 70%;
}

.sectionHeader {
  margin-bottom: 70px;
}

.section {
  padding: 100px 200px;
}

@media(max-width: 1200px) {
  .section {
    padding: 80px 150px;
  }
  .memberFocus {
    width: 80%;
  }
}

@media(max-width: 1100px) {
  .memberFocus {
    width: 90%;
  }
}

@media(max-width: 1000px) {
  #members {
    display: block;
  }
  .memberContainer {
    width: 100%;
    display: block;
    text-align: center;
  }
  .memberFocus {
    width: 100%;
  }
}

@media(max-width: 800px) {
  .section {
    padding: 60px 80px;
  }
}

@media(max-width: 600px) {
  .section {
    padding: 40px 40px;
  }
}

@media(max-width: 400px) {
  .section {
    padding: 20px 10px;
  }
}
<div id="about" class="section">
  <h1 id="aboutHeader" class="sectionHeader">
    Who we are
  </h1>
  <div id="members">
    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Foo Bar
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development, Back-End Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Bar Foo
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development, Back-End Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          John Doe
        </h2>
        <p class="memberFocus">
          Corporate Design, Print Design, Android Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Olaf Svenson
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development
        </p>
      </div>
    </div>
  </div>
  <p id="aboutAttracting">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>

请在大屏幕上打开代码段，否则您只会看到移动视图。

如您所见，我想将文本宽度限制为容器宽度的80％。结果看起来像

current

容器本身居中，但是当限制文本时，视图看起来是错误的。

通常看起来像

enter image description here

但我不想使用text-align: center，因为文本仍应保持对齐。

如何解决文本限制？

future

2 个答案:

答案 0 :(得分：1)

我认为这对您有用

我对flex:的孩子使用了.memberContainer，并删除了.memberFocus的样式

#about {
  background: #ffffff;
}

#aboutHeader {
  text-align: center;
}

#members {
  display: flex;
  flex-wrap: wrap;
}

#aboutAttracting {
  text-align: center;
  margin-top: 70px;
}

.memberContainer {
  width: 50%;
  display: flex;
  margin-top: 50px;
}

.sectionHeader {
  margin-bottom: 70px;
}

.section {
  padding: 100px 200px;
}

.memberImgContainer {
  flex: .4;
  text-align: right;
}

.memberTxtContainer {
  flex: .5;
}

@media(max-width: 1200px) {
  .section {
    padding: 80px 150px;
  }
  .memberFocus {
    width: 80%;
  }
}

@media(max-width: 1100px) {
  .memberFocus {
    width: 90%;
  }
}

@media(max-width: 1000px) {
  #members {
    display: block;
  }
  .memberContainer {
    width: 100%;
    display: block;
    text-align: center;
  }
  
  .memberImgContainer {
    flex: 1;
    text-align: center;
  }

  .memberTxtContainer {
    flex: 1;
  }
}

@media(max-width: 800px) {
  .section {
    padding: 60px 80px;
  }
}

@media(max-width: 600px) {
  .section {
    padding: 40px 40px;
  }
}

@media(max-width: 400px) {
  .section {
    padding: 20px 10px;
  }
}
<div id="about" class="section">
  <h1 id="aboutHeader" class="sectionHeader">
    Who we are
  </h1>
  <div id="members">
    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Foo Bar
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development, Back-End Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Bar Foo
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development, Back-End Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          John Doe
        </h2>
        <p class="memberFocus">
          Corporate Design, Print Design, Android Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Olaf Svenson
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development
        </p>
      </div>
    </div>
  </div>
  <p id="aboutAttracting">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>

希望这对您有所帮助。

答案 1 :(得分：0)

在您的示例中，我用背景突出显示了这些框。您可以看到它已经居中，但是您添加到段落中的70％宽度导致了此预览问题！

https://codepen.io/moradxd/pen/BOQZWx

尽管您说需要应用80％的内容宽度，但是如果您尝试增加此宽度，则可以更好地解决此预览问题。

我向您建议这些更改，其中我为#about设置了固定宽度，并通过设置margin-left: auto; margin-right: auto;在页面内居中。然后为padding-right: 30px添加.memberContainer，并添加box-sizing: border-box;以使该填充成为50%宽度的一部分。

这是更新的演示：https://codepen.io/moradxd/pen/eLBRJa

选中此项以了解box-sizing属性

#about {
  background: #ffffff;
}

#aboutHeader {
  text-align: center;
}

#members {
  display: flex;
  flex-wrap: wrap;
}

#aboutAttracting {
  text-align: center;
  margin-top: 70px;
}

.memberContainer {
  width: 50%;
  display: flex;
  margin-top: 50px;
  background: #eee;
}

.memberContainer:nth-child(2n+1) {
    background: #d6d5d5;
}

.memberFocus {
  width: 70%;
}

.sectionHeader {
  margin-bottom: 70px;
}

.section {
  padding: 100px 200px;
}

@media(max-width: 1200px) {
  .section {
    padding: 80px 150px;
  }
  .memberFocus {
    width: 80%;
  }
}

@media(max-width: 1100px) {
  .memberFocus {
    width: 90%;
  }
}

@media(max-width: 1000px) {
  #members {
    display: block;
  }
  .memberContainer {
    width: 100%;
    display: block;
    text-align: center;
  }
  .memberFocus {
    width: 100%;
  }
}

@media(max-width: 800px) {
  .section {
    padding: 60px 80px;
  }
}

@media(max-width: 600px) {
  .section {
    padding: 40px 40px;
  }
}

@media(max-width: 400px) {
  .section {
    padding: 20px 10px;
  }
}
<div id="about" class="section">
  <h1 id="aboutHeader" class="sectionHeader">
    Who we are
  </h1>
  <div id="members">
    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Foo Bar
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development, Back-End Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Bar Foo
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development, Back-End Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          John Doe
        </h2>
        <p class="memberFocus">
          Corporate Design, Print Design, Android Development
        </p>
      </div>
    </div>

    <div class="memberContainer">
      <div class="memberImgContainer">
        <img class="img" src="https://cdn.discordapp.com/attachments/476389353799680000/484618008455806977/node.png">
      </div>
      <div class="memberTxtContainer">
        <h2>
          Olaf Svenson
        </h2>
        <p class="memberFocus">
          Webdesign, Desktop Applications, Web Applications, Game Development
        </p>
      </div>
    </div>
  </div>
  <p id="aboutAttracting">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>

相关问题
最新问题