CSS Primer字体排版文本对齐

对于任何开发人员来说，排版是网页设计的重要方面。它包括选择字体系列，正确的间距，大小和文本在网页中的对齐方式。正确的排版确保了网站的可读性提升。

文本对齐是排版的重要组成部分，确保完美对齐可能是一项挑战，特别是对于初学者来说。在这里，我们有开发人员的Primer CSS。在本文中，我们将讨论Primer CSS中提供的文本对齐功能，以及它在制作用户友好的网站方面的帮助。因此，让我们开始吧。

CSS Primer

Primer CSS是由GitHub设计系统创建的用于CSS的开源框架。它专为Web开发人员设计，使他们能够快速创建响应式和自定义的网站。它提供了一套多功能的内置组件，如字体排版，按钮，警报，截断，菜单，导航等。它易于使用并节省了很多时间。

此外，它还为初学者提供了详细的文档，以便随时开始。这个框架在几乎所有现代浏览器中都得到支持。但是，某些旧版本可能会对其某些功能有问题。

要将Primer CSS合并到您的HTML文件中，请使用以下CDN链接−

<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />

文本排列

文本排列是Primer CSS提供的排版组件之一。它使开发人员可以通过使用类来对网页上的文本进行排列。

用于文本排列的类如下：

text-left
text-center
text-right

“text-left”类

这个类使我们可以将文本向页面的左侧对齐。以下是该类的语法：

<div class= "text-left"> </div>

示例

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      * {
         margin: 10px;
         padding: 2px;
      }

      h1 {
         color: brown;
         text-decoration: underline;
         font-family: Georgia;
      }
   </style>
</head>
<body>
   <h1> Primer CSS Typography text alignment </h1>
   <div>
      <p> This div element contains text which is aligned by default. </p>
      <p class="text-left"> This div element contains text which is aligned towards the left using the text-left class of Primer CSS. </p>
   </div>
</body>
</html>

如您在上方所见，默认情况下文本向页面的左侧对齐。

“text-center”类

这个类使我们能够将文本对齐到页面或屏幕的中心。以下是该类的语法：

<div class= "text-center"> </div>

示例

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      * {
         margin: 10px;
         padding: 2px;
      }
      h1 {
         color: brown;
         text-decoration: underline;
         font-family: Georgia;
      }
   </style>
</head>
<body>
   <h1> Primer CSS Typography text alignment </h1>
   <div>
      <p> This div element contains text which is aligned by default. </p>
      <p class="text-center"> This div element contains text which is aligned towards the center using the text-center class of Primer CSS. </p>
   </div>
</body>
</html>

响应式文本对齐

响应式文本对齐意味着文本根据用户屏幕或设备的不同尺寸来自动调整其对齐方式。换句话说，文本的对齐方式会随着屏幕类型（如手机、平板、桌面电脑等）的变化而改变。

使文本具有响应性对于您的网站非常重要，因为这样可以使网站更加用户友好和吸引人。Primer CSS通过使用类，提供了这个功能，使字体组件内的文本具备响应式对齐功能。

语法

<div class= "text-left text-sm-center text-lg-right"> </div>

示例

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      *{
         margin: 0;
         padding: 0;
      }
      h1{
         color: orange;
         text-decoration: underline;
         font-family: Calibri;
      }
      div{
         font-size: 16px;
      }
   </style>         
</head>
<body>
   <h1> Primer CSS Typography text alignment </h1>
   <div class= "text-sm-left text-md-center text-lg-right">
      This text will be left aligned in small screen devices (screen size: up to 760 pixels), centrally aligned for medium screen devices (screen size: 768- 1012 px) and right aligned in large devices (screen size: above 1012 pixels)
   </div>
</body>
</html>