資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會科學
時尚研究
法律研究如何使用 CSS 在中部新增文字的水平線？
使用 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://tutorialspoint.tw/images/logo.png"></p>
</body>
</html>
輸出
更新於：05-Dec-2022
3 千+ 瀏覽
廣告