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

Question

需要在"let out the ..."上方显示"think"字样

注释 #1："let out the"、"creative"、"beast" 应与其基线保持一致。

注意 #2："think" 的顶部位置应等于 "creative"

    .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

如果你想在 css 中进行复制，你可以使用一些嵌套的 flexbox，查看我的代码片段：

.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 2

查看我编写的这个示例。这是为您准备的设置，因为我没有 KenyanCoffeeRg-Bold 字体。所以我无法解决问题。

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

.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 3

适用于所有人的简单解决方案：

.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 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>

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

CSS: Need a very non-trivial text-alignment

html

css

typography

text-alignment