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

Question

我有一个 header，其标题和副标题都使用 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 居中对齐不同。所以继续在上面添加 text-align:center。

我还做了一些其他更改。

删除了图片底图
改为将图像设置为背景，并设置大小至 "cover"
添加了一些填充，这样您的白框就不会碰到边缘

至于中间的文本换行，除了为文本开始换行设置媒体查询然后用 max-width 更新标题之外，我不确定还有什么方法可以做到这一点在 CSS。请参阅下面的 CodePen

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

Answer 2

不完全确定你在问什么，但如果你只是想使标题居中，~~根本不需要使用 flex~~。好的，垂直对齐需要用到flex。添加它。这是一个编辑过的codepen：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>

Answer 3

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

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

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

Heading won't align center if longer than one line

html

css

sass

flexbox