[分享]css两行标题居中对齐

在设计网页页面时，标题往往是重要的元素之一，而让标题居中对齐能够让网页页面更加美观和易读。本文将介绍如何使用 CSS 让两行标题居中对齐。 首先，我们需要在 HTML 中定义我们的标题。在这个例子中，...

在设计网页页面时，标题往往是重要的元素之一，而让标题居中对齐能够让网页页面更加美观和易读。本文将介绍如何使用 CSS 让两行标题居中对齐。
首先，我们需要在 HTML 中定义我们的标题。在这个例子中，我们将使用 p 标签来定义我们的标题，并在其中添加两行文本。

 <p class="title">这是第一行标题<br>这是第二行标题</p> 

接下来，我们需要使用 CSS 来对我们的标题进行样式设置。我们可以使用 text-align 属性来将标题居中对齐。但这不够，因为两行标题长度不同，这将导致第二行标题相对于第一行标题偏移。所以，我们需要使用 display 属性来设置标题的显示方式为 table。

 .title {
    text-align: center;
    display: table;
  } 

通过将标题显示方式设置为 table，我们可以强制让标题的两行文本在同一行上对齐，即使它们的长度不同。
现在，我们已经成功地让两行标题居中对齐并呈现在我们网页中了。
总的来说，要让两行标题居中对齐，我们需要使用 display 属性将标题的显示方式设置为 table，并使用 text-align 属性将标题居中对齐。这可以让我们的网页页面更加美观和易读。