我的導航欄代碼有問題！
我的HTML和CSS中的所有內容都設定正確，我在嘗試將文本徽標居中的特定代碼行中遇到問題！
或者我應該指定另一行代碼來將我的文本徽標居中？
我將Logo作為Text因為我不想將影像作為 logo。
但是，現在我正在嘗試將徽標文本居中在NAVBAR的中間
但它不作業。中間不知道怎么放！
請幫忙！
PS：我不想更改當前代碼，我只想將 Logo Text 居中。
這是我的 HTML 和 CSS 的完整代碼！
請在您的編輯器上運行它以更好地理解它！謝謝你的幫助。
HTML：
<!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" />
<script
src="https://kit.fontawesome.com/0c0d062607.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" type="text/css" href="Styles/style.css" />
<script
src="https://kit.fontawesome.com/0c0d062607.js"
crossorigin="anonymous"
></script>
<title>My Page</title>
</head>
<body>
<div class="topnav">
<a class="active" href="#home"><i class="fa-solid fa-house"></i> Home</a>
<a href="portfolio.html"><i class="fa-solid fa-wallet"></i> Portfolio</a>
<a href="contact.html"
><i class="fa-regular fa-circle-user"></i> Contact</a
>
<a href="about.html"><i class="fa-regular fa-comment"></i> About</a>
<a href="index.html" id="logo">My Logo</a>
<div class="social">
<a
class="facebook"
href="https://facebook.com"
target="_blank"
title="Facebook"
><i class="fa-brands fa-facebook"></i>  Facebook</a
>
<a
class="instagram"
href="https://instagram.com"
target="_blank"
title="Instagram"
><i class="fa-brands fa-instagram"></i>  Instagram</a
>
<a
class="twitter"
href="https://twitter.com"
target="_blank"
title="Twitter"
><i class="fa-brands fa-twitter"></i>  Twitter</a
>
</div>
</div>
</body>
</html>
CSS：
body {
background-image: url(../images/body_bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.topnav {
background-color: rgb(54, 54, 54);
overflow: hidden;
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
border-top: 3px solid rgb(250, 186, 113);
border-bottom: 3px solid rgb(250, 186, 113);
filter: saturate(2);
}
.topnav a {
float: left;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
color: rgb(250, 186, 113);
text-align: center;
padding: 11px 15px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
.topnav a:hover {
background-color: rgba(255, 255, 255, 0.7);
color: rgb(0, 0, 0);
}
.topnav a.active {
background-color: rgb(250, 186, 113);
color: white;
}
.social {
float: right;
}
uj5u.com熱心網友回復：
也許你可以做這樣的事情
<a href="index.html" id="logo" style="position: absolute;left: 50%;">My Logo</a>
uj5u.com熱心網友回復：
試試這個代碼。我只是在您的代碼中更改了一些內容。只有4-5行。看看希望它能幫助你并解決你的問題。
HTML
<!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 rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/0c0d062607.js" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/0c0d062607.js" crossorigin="anonymous"></script>
<title>My Page</title>
</head>
<body>
<div class="topnav">
<div class="links">
<a class="active" href="#home"><i class="fa-solid fa-house"></i> Home</a>
<a href="portfolio.html"><i class="fa-solid fa-wallet"></i> Portfolio</a>
<a href="contact.html"><i class="fa-regular fa-circle-user"></i> Contact</a>
<a href="about.html"><i class="fa-regular fa-comment"></i> About</a>
</div>
<div class="logo">
<a href="index.html" id="logo">My Logo</a>
</div>
<div class="social">
<a class="facebook" href="https://facebook.com" target="_blank" title="Facebook"><i class="fa-brands fa-facebook"></i>  Facebook</a>
<a class="instagram" href="https://instagram.com" target="_blank" title="Instagram"><i class="fa-brands fa-instagram"></i>  Instagram</a>
<a class="twitter" href="https://twitter.com" target="_blank" title="Twitter"><i class="fa-brands fa-twitter"></i>  Twitter</a>
</div>
</div>
</body>
</html>
CSS
body {
background-image: url(../images/body_bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.topnav {
background-color: rgb(54, 54, 54);
overflow: hidden;
width: 100%;
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
border-top: 3px solid rgb(250, 186, 113);
border-bottom: 3px solid rgb(250, 186, 113);
filter: saturate(2);
display: flex;
justify-content: space-between;
}
.topnav a {
float: left;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
color: rgb(250, 186, 113);
text-align: center;
padding: 11px 15px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
.topnav a:hover {
background-color: rgba(255, 255, 255, 0.7);
color: rgb(0, 0, 0);
}
.topnav a.active {
background-color: rgb(250, 186, 113);
color: white;
}
.social {
float: right;
}
看一看。這是完美的
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/438243.html
下一篇：防止模態對話框/div離開螢屏