代码之家 › 专栏 › 技术社区 › Laura

标题和副标题文本并排HTML/CSS

css html

Laura · 技术社区 · 5 年前

我正在训练用这个简单的代码做报告。我想把标题报告和副标题放在一起。如何进行此调整?

这是我的HTML代码:

html {
  min-height: 100%;
  /* background: linear-gradient(to top left, red 10%, white 70.5%); */
  background: whitesmoke;
}

div#header.title-page {
  margin-left: 150px;
  margin-top: 220px;
}

h1.title {
  font-size: 50pt;
}

<div class="front-page">
    <div id="header" class="title-page">
        <h1 class="title">Quarterly Report</h1>
        <h1 class="subtitle"><span>Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text </span></h1>
        <h2 class="author">Me</h2>
        <h2 class="date">2019-10-18</h2>
    </div>
</div>

另外,我想把日期放在右上角,我的名字放在右下角。

我该怎么做?

1 回复 | 直到 5 年前

Nidhin Joseph 5 年前

你可以使用 CSS flex 使项目并排对齐。现在对于日期和名称,只需使用 text-align: right;

html {
  background: whitesmoke;
}

#header {
  display: flex;
  flex-direction: column;
}

.title_wrapper {
  display: flex;
  align-items: center;
}

.date,
.author {
  text-align: right;
}

h1.title {
  font-size: 50pt;
}

<div class="front-page">
  <div id="header" class="title-page">
    <h2 class="date">2019-10-18</h2>
    <div class="title_wrapper">
      <h1 class="title">Quarterly Report</h1>
      <h1 class="subtitle">Sub Title</h1>
    </div>
    <h2 class="author">Me</h2>
  </div>
</div>

-1

SalmanEagle 5 年前

奈丁的帖子太棒了!我想补充一点,劳拉,你可以通过以下编辑(用星号表示)将字幕与标题垂直对齐到nidhin发布的代码:

 **.subtitle {
    vertical-align: baseline;
    font-size:45%;
  }**

<div class="front-page">
    <h2 class="date">2019-10-18</h2>
    <div id="header" class="title-page">
    **<h1 class="title">Quarterly Report <span class="subtitle">Sub Title</span></h1>**
    </div>
    <h2 class="author">Me</h2>
</div>

参考: how to have text of 2 font sizes in same line in HTML?