灵活的文本容器，可根据内容自动调整大小

Question

我正在尝试在这里创建一个横幅，要求带有类bannerText的标题div应始终显示在中心，并且必须出现在中心，白色背景，文本和白色背景边框之间保持30px的填充。我想要横幅文本是流动的，最大宽度为900px。

因此，如果单词很少，而不是使用900px保持固定，则必须使用带有白色背景的30px填充分解为内容。

但是一旦标题变得更长，它就会包含到下一行，而不会超过900px。

文本应始终水平和垂直对齐，这是我已经完成的。但我的问题在于灵活的容器。

＆＃13;

＆＃13;

#banner {
  position: relative;
  -webkit-font-smoothing: anti-aliasing;
  text-rendering: optimizelegibility;
  max-height: 422px;
  overflow: hidden;
}
#banner img {
  height: auto;
  width: 100%;
}
.bannerText {
  text-align: center;
  position: absolute;
  top: 50%;
  width: 100%;
  font-weight: 700;
  font-size: 2em;
  margin-top: -40px;
  color: #D87A00;
}
#bannerTitle {
  width: 911px;
  color: #0e2bff;
}

＆＃13;

<section id="banner">
  <section class="bannerImage">
    <img src="picture.png" class="img-responsive">
  </section>
  <div class="bannerText">
    <section id="bannerTitle">Demo banner title reset</section>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

* {
  box-sizing: border-box;
}

#banner {
  position: relative;
  -webkit-font-smoothing: anti-aliasing;
  text-rendering: optimizelegibility;
  max-height: 422px;
  overflow: hidden;
}

#bannerImage {
  height: 422px;
  background: orange;
}

.bannerText {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 900px;
  transform:translate(-50%,-50%);
  font-weight: 700;
  font-size: 2em;
  background: white;
}

#bannerTitle {
  padding: 30px;
  color: #0e2bff;
}

<section id="banner">
  <section id="bannerImage">
  </section>
  <div class="bannerText">
    <section id="bannerTitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci !</section>
  </div>
</section>

Codepen Demo

Answer 2

Flexbox is your friend! Don't make this more complicated than it has to be. Set your image as the background image of your banner. The only content in your banner is the title, so you only need the wrapper (the banner) and the content (the title). 2 divs with the properties you need. Use Flexbox to center your title, and set your max-width. Use rgba as your color to have the see-through effect.

CSS:

#banner {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#D60;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:450px;
}
.title {
  background:rgba(255,255,255,.5);
  color:blue;
  padding:30px;
  max-width:840px;
}

HTML

<section id="banner">
  <div class="title">
  Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing 
  </div>
</section>

The max-width comes from 900px - 60px of padding on each side.