CSS：需要一个非常重要的文本对齐

Question

必须在“let out the ...”上方显示“think”二字

注意#1：“let out the”、“creative”、“beast”应该与它们的基线对齐。

注意#2：“think”的顶部位置应该等于“creative”的capline

    .section{
        max-width: 940px;
        margin: 0 auto;
    }
    .section__title{
        font-family: 'KenyanCoffeeRg-Bold',sans-serif;
        text-transform: uppercase;
        text-align: center;
        color: #3f3b48;
        font-size: 56px;
        font-weight: 700;
    }
    .text--handwritten{
        font-family: 'Pacifico',cursive;
        text-transform: capitalize;
        font-weight: 300;
        font-style: italic;
    }
    .text--emphasized{
        font-size: 122px;
        color: #ff0000;
    }

    <section class="section">
        <h1 class="section__title">
            <span class="text text--handwritten">Think</span>
            <!-- Typical linebreak not solve my problem... -->
            <br>
            <span>Let out the</span>
            <span class="text text--emphasized">creative</span>
            beast
        </h1>
    </section>

Answer 1

看看这个我制定的例子。 这是为您设置的，因为我没有 KenyanCoffeeRg-Bold 字体。所以我无法解决 capline 的问题。

仅供参考：查看完整的展开版本。

.section{
        max-width: 100%;
        margin: 0 auto;
    }
    .section__title{
        font-family: 'KenyanCoffeeRg-Bold',sans-serif;
        text-transform: uppercase;
        text-align: center;
        color: #3f3b48;
        font-size: 56px;
        font-weight: 700;
    }
    .text__wrapper {
      display: inline-block;
    }
    .text--handwritten{
        display: block;
        font-family: 'Pacifico',cursive;
        text-transform: capitalize;
        text-align: right;
        font-weight: 300;
        font-style: italic;
    }
    .text--let-it-out {
      display: block;
      text-align: right;
    }
    .text--emphasized{
        font-size: 122px;
        color: #ff0000;
    }

<link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">

<section class="section">
        <h1 class="section__title">
            <span class="text__wrapper">
              <span class="text text--handwritten">Think</span>
              <span class="text--let-it-out">Let out the</span>
            </span>
            <span class="text__wrapper">
              <span class="text text--emphasized">creative</span>
            </span>
            <span class="text__wrapper">
              <span class="">beast</span>
           </span>
        </h1>
    </section>

Answer 2

所有人的简单解决方案：

.section {
    max-width: 940px;
    margin: 0 auto;
}

.section__title {
    font-family: sans-serif;
    font-size: 50px;
    color: red;
    line-height: 1;
    margin: 0;
    text-align: center;
    padding: 20px 0;
    background: repeating-linear-gradient(to right,
            #FFE5E5,
            #FFE5E5 40px,
            #fff 40px,
            #fff 50px);
}

.section__title span {
    position: relative;
    font-size: 20px;
    color: black;
}

.section__title span em {
    font-family: serif;
    position: absolute;
    right: 0;
    top: -20px;
}

<section class="section">
    <h1 class="section__title"><span>LET OUT THE<em>Think</em></span> CREATIVE <span>BEAST</span></h1>
</section>

同样在JSFiddle。

Answer 3

如果你想在 css 中复制，你可以使用一些嵌套的 flexbox，检查我的 sn-p：

.title-wrapper{
  display:flex;
  justify-content:center;
  width:600px;
  border:1px solid;
}

.title{
  display:flex;
  align-items:flex-end;
  background-size:20%;
  background-image: url(https://s3.amazonaws.com/spoonflower/public/design_thumbnails/0441/6527/rModern_Stripe___Vertical___Dauphine_and_White___Peacoquette_Desgins___Copyright_2015_shop_preview.png)
}

.title .col{
  display:flex;
  flex-direction: column;
  padding:5px;
}

.title .center{
  font-size:70px;
  line-height:70px;
}

.title .left{
  font-size:18px;
  line-height:20px;
  text-align:right;
}

.title .left.bottom{
  font-size:30px;
  line-height:40px;
  text-align:right;
}

.title .right{
  font-size:30px;
  line-height:40px;
}

<section class="section">
  <div class="title-wrapper">
        <h1 class="section__title title">
            <span class="col">
              <span class="row left top">Think</span>
              <span class="row left bottom">Let out the</span>
            </span>
            <span class="col center">Creative</span>
            <span class="col right">Beast</span>
        </h1>  
  </div>

</section>

Answer 4

对 flex 做一些工作将保持 h1 完好无损。

<section class="section">
 <h1 class="section__title">
  <span class="left">
   <span class="text">Think</span>
   <span>Let out the</span>   
  </span>
  <span class="right">
   <span class="largeText">creative</span>
   <span class="text">beast</span>
  </span>
 </h1>
</section>

body {
 font-family: Impact, sans-serif;
}

h1 {
 display: flex;
 align-items: flex-end;
}

.left {
 display: flex;
 flex-direction: column;
 text-align: right;
}

.right {
  margin-bottom: -5px; 
}

.left .text {
 font-family: arial;
}

.largeText {
 padding: 0 5px;
 font-size: 52px;
}

https://codepen.io/paulcredmond/pen/OKmEmX?editors=1100

Answer 5

我已经使用了flex，但是认为您可能必须在这种结构中使用位置。

  .section{
        max-width: 940px;
        margin: 0 auto;
    }
    .section__title{
        font-family: 'KenyanCoffeeRg-Bold',sans-serif;
        text-transform: uppercase;
        text-align: center;
        color: #3f3b48;
        font-size: 30px;
        font-weight: 700;
    }
    .text--handwritten{
      font-family: 'Pacifico',cursive;
      text-transform: capitalize;
      font-weight: 300;
      font-style: italic;
      position: absolute;
      left: 140px;
      top: 64px;
      font-size: 20px;
    }
    .text--emphasized{
        font-size: 60px;
        color: #ff0000;
    }
    .text-line{
        display:flex;
        align-items: baseline;
        }
        

 <section class="section">
        <h1 class="section__title">
            <span class="text text--handwritten">Think</span>
            <br>
            <span class="text-line">
            <span class="bottom">Let out the</span>
            <span class="text text--emphasized">creative</span>
            <span class="bottom">beast</span>
            </span>
        </h1>
    </section>