段落标签强制父级采用全尺寸的flexbox [英] Paragraph Tag forces parent to take full width of flexbox

问题描述

我正在尝试创建一个非常简单的布局，其中标题，段落和按钮在水平和垂直方向上都与页面的中心对齐.我希望.centered-div取.heading的宽度.

I am trying to create a very simple layout where a heading, paragraph and button are aligned to the center of the page horizontally and vertically. I want the .centered-div to take the width of the .heading.

问题是段落标签似乎通过使.centered-div占用.container的宽度而不是.heading的宽度破坏了整个事情.

Trouble is the paragraph tag seems to break the whole thing by making the .centered-div take the width of the .container instead of the width of the .heading.

如果我删除了段落.centered-div，则将其最大宽度设为.heading的宽度.

If I remove the paragraph .centered-div takes it's maximum width to be the width of the .heading.

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.centered-div {
  display: flex;
  margin: auto;
  align-self: center;
  align-items: flex-end;
  flex-direction: column;
}

.heading {
  display: inline-block;
  text-align: right;
}

.description {
  display: inline-block;
  width: 50%;
}

.link-button {
  width: auto;
}

<div class="container">
  <div class="centered-div">
    <h1 class="heading">A Considerably Long Heading</h1>
    <p class="description">
      Lorem ipsum dolor...
    </p>
    <a class="button" href="/">Learn More</a>
  </div>
</div>

灰色为.container，红色轮廓为.centered-div

如果需要更多信息，请告诉我. 预先感谢您的帮助.

If more information is needed please let me know. Thanks in advance for your help.

推荐答案

您可以将width:0;min-width:100%;技巧与文本容器配合使用，以使其遵循标题的宽度:

You can use the trick width:0;min-width:100%; with the text container which will allow it to follow the width of the header:

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.centered-div {
  display: flex;
  margin: auto;
  align-self: center;
  align-items: flex-end;
  flex-direction: column;
}

.heading {
  text-align: right;
}

.description {
  width:0;
  min-width:100%;
  text-align:justify;
}

.link-button {
  width: auto;
}

<div class="container">
  <div class="centered-div">
    <h1 class="heading">A Considerably Long Heading</h1>
    <p class="description">
      Lorem ipsum dolor Lorem ipsum dolorLorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor 
    </p>
    <a class="button" href="/">Learn More</a>
  </div>
</div>

这篇关于段落标签强制父级采用全尺寸的flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！