我正在為我的企業網站撰寫聯系頁面，但由于某種原因，當我運行我的代碼時，我的標題和我的
即使我將邊距和填充都設定為 0，段落之間的距離也很遠。我不知道這是 CSS 故障還是我做錯了什么。幫助將不勝感激。謝謝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="contact-style.css" rel="stylesheet" type="text/css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<title>Document</title>
<style>
body{
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
overflow-x: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#hero{
border-radius: 15px;
margin-top: -0.8%;
background: rgb(14,39,79);
background: linear-gradient(180deg, rgba(14,39,79,1) 0%, rgb(25, 58, 110) 100%);
width: 98.5%;
height: 94%;
}
h1{
color: white;
font-weight: 400;
font-size: 400%;
display: flex;
place-content: center;
margin-top: 20vh;
margin-bottom: 0;
padding-bottom: 0px ;
}
p{
color: #CFCDD4;
margin-top: 0;
padding-top: 0px;
}
#expand-arrow{
color: white;
margin-top: 37.5vh;
transform: scale(2.5);
transition: 0.4s ease;
}
#expand-arrow:hover{
margin-top: 38.7vh;
}
</style>
</head>
<body>
<div id = "hero" class = "center">
<h1>Contact</h1>
<p class = "center">Have Any Questions or Conserns? Don't Hesitate To Ask Us Here.</p>
<ion-icon name="chevron-down-outline" id = "expand-arrow" class = "center"></ion-icon>
</div>
</body>
</html>uj5u.com熱心網友回復：
這是因為您將段落絕對定位在頁面上。您將其設定為top: 50%，這意味著將段落垂直放置在頁面中間。
要居中，您可以簡單地使用
.center-text {
text-align: center;
}
uj5u.com熱心網友回復：
該.center級似乎是你的包裝類，從p標簽中取出，并且中心與文本text-align:center。
另一個選項 id 添加用于將標題居中的“flex-box 版本”： display: flex; place-content: center;
保持這樣的東西：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="contact-style.css" rel="stylesheet" type="text/css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<title>Document</title>
<style>
body{
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
overflow-x: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#hero{
border-radius: 15px;
margin-top: -0.8%;
background: rgb(14,39,79);
background: linear-gradient(180deg, rgba(14,39,79,1) 0%, rgb(25, 58, 110) 100%);
width: 98.5%;
height: 94%;
}
h1{
color: white;
font-weight: 400;
font-size: 400%;
display: flex;
place-content: center;
margin-top: 20vh;
margin-bottom: 0;
padding-bottom: 0px ;
}
p{
color: #CFCDD4;
margin-top: 0;
padding-top: 0px;
text-align:center;
}
#expand-arrow{
color: white;
margin-top: 37.5vh;
transform: scale(2.5);
transition: 0.4s ease;
}
#expand-arrow:hover{
margin-top: 38.7vh;
}
</style>
</head>
<body>
<div id = "hero" class = "center">
<h1>Contact</h1>
<p>Have Any Questions or Conserns? Don't Hesitate To Ask Us Here.</p>
<ion-icon name="chevron-down-outline" id = "expand-arrow" class = "center"></ion-icon>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408400.html
標籤：