如何使用 CSS 创建中间带有文字的水平线?

htmlweb developmentfront end technology更新于 2024/7/18 18:52:17

使用 CSS，我们可以创建中间带有文字的水平线。此外，我们还可以创建带有标题甚至图像的水平线。让我们看一些示例 -

创建中间带有文字的水平线

示例

在此示例中，我们将使用 flex 创建中间带有文字的水平线 -

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         display: flex;
         flex-direction: row;
      }
      p:before,
      p:after {
         content: "";
         flex: 1 1;
         border-bottom: 3px solid orange;
         margin: auto;
      }     
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>I am in the middle</p>
</body>
</html>

输出

创建一条水平线，标题居中

示例

在此示例中，我们将使用 flex 创建一条水平线，标题居中 -

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         display: flex;
         flex-direction: row;
      }
      h1:before,
      h1:after {
         content: "";
         flex: 1 1;
         border-bottom: 3px solid orange;
         margin: auto;
      }   
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
</body>
</html>

输出

创建一条水平线，图片位于中间

示例

在此示例中，我们将使用 flex 创建一条水平线，图片位于中间 -

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         display: flex;
         flex-direction: row;
      }
      p:before,
      p:after {
         content: "";
         flex: 1 1;
         border-bottom: 3px solid orange;
         margin: auto;
      }
      img {
         height: 100px;
         width: 250px;
         border-radius: 50%;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p><img src="https://www.cainiaomax.com/images/logo.png"></p>
</body>
</html>