Question

我有一个标题和副标题的标题，使用flexbox进行中心对齐，背后有一个淡白色背景。背景应该只与文本本身一样宽，如果标题和副标题都足够短，它可以正常工作，但如果副标题长于一行则开始分解。

.entry-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(255,255,255,0.7);
  padding: 6px 12px;
  margin: auto;
  border-radius: 2px;
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
}

<header class="entry-header">
  <div class="entry-title-wrap">
    <h1 class="entry-title">Nick Dourado</h1>
    <h2 class="entry-subtitle">If the title is longer than one line so that it breaks over the line it makes the whole box way too big.</h2>
  </div>
</header>

一旦字幕长于屏幕宽度并且断开多行，包含它的h2标签就会扩展到容器的整个宽度，这也会将白色背景推向边缘。它还将文本对齐在h2的左侧，除非我添加text-align: center;事件，尽管它应该由于flexbox样式而居中。

如何将白框限制在文本宽度范围内，并阻止h2扩展到容器宽度？如果可能的话，我也希望强制字幕在文本的中间而不是一次一个字，这样所有的行都或多或少相同的长度。

Here it is in CodePen.如果你缩短字幕句子，你可以看到应该的样子。

这是该网站的旧版本：http://theartsabstract.ca/post/151891941177/nick-dourado-on-halifaxs-improvised-music-scene

Answer 1

将中心的块元素与flex对齐与在标题上使用文本对齐中心不同。因此，请继续添加text-align:center。

我还做了一些其他改动。

删除了图片底层
将图像设置为背景，并设置大小到＆＃34;覆盖＆＃34;
添加了一些填充，这样你的白盒子就不会碰到边缘

至于文本环绕中间，除了在文本开始换行时设置媒体查询，然后用CSS中的最大宽度更新标题时，我不确定是否有任何方法可以做到这一点。请参阅下面的CodePen

http://codepen.io/anon/pen/kkdgjX?editors=1100

Answer 2

将text-align: center;添加到.entry-title-wrap h2

http://codepen.io/anon/pen/dpEvbj?editors=1100#0

Answer 3

不完全确定你要问的是什么，但是如果你只是想把标题集中在一起，那么~~根本不需要使用flex~~ 。好的，需要使用flex进行垂直对齐。添加它。这是一个经过编辑的代码集：http://codepen.io/anon/pen/NRVdBQ?editors=1100#0

CSS

.entry-header {
  display: flex;
  justify-content: center;
  height: 340px;
}
.entry-title-wrap {
  background-color: rgba(255,255,255,0.7);
  padding: 6px 12px;
  margin: auto;
  border-radius: 2px;
  max-width: 20em;
}
h1 { text-align: center;
    font-size: 48px; }
h2 { font-size: 32px; 
  text-align: justify;
    text-align-last: center;;
}

div.post-thumb-banner {
  display: flex;
  align-items: center;
  position: absolute;
  height: 340px;
  width: 100%;
  overflow: hidden;
  img {
    width: 100%;
    height: auto;
  }
  z-index: -10;
}

HTML

<div class="post-thumb-banner">
  <img width="4795" height="3460" src="http://media2.fdncms.com/thecoast/imager/u/original/5056558/dsc_5435_1_.jpg" />
</div>

<header class="entry-header">
  <div class="entry-title-wrap">
    <h1 class="entry-title">Nick Dourado</h1>
    <h2 class="entry-subtitle"><i>If the title is a lot longer than it should be it should just wrap properly as this.</i></h2>
  </div>
</header>

如果长度超过一行，标题将不会对齐中心

3 个答案: