我正在嘗試使用順風根據標題標簽寬度將導航選單水平居中。問題是它僅基于導航標簽寬度居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header class="flex justify-between items-center h-16 bg-gray-400 px-2">
<div class="flex space-x-4 items-center">
<img src="https://picsum.photos/500/100" alt="" class="h-12 w-auto" />
<span>Company Name</span>
</div>
<nav
class="flex space-x-4 border border-blue-400 flex-grow justify-center"
>
<a href="#">Home</a>
<a href="#">Search</a>
</nav>
<div>
Profile
</div>
</header>
</body>
</html>
uj5u.com熱心網友回復：
像這樣？我relative在 <header> 和absolute w-full<nav> 上添加了。
<header class="flex justify-between items-center h-16 bg-gray-400 px-2 relative">
<div class="flex space-x-4 items-center">
<img src="https://picsum.photos/500/100" alt="" class="h-12 w-auto" />
<span>Company Name</span>
</div>
<nav class="flex space-x-4 border border-blue-400 flex-grow justify-center absolute w-full">
<a href="#">Home</a>
<a href="#">Search</a>
</nav>
<div>
Profile
</div>
</header>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390310.html
下一篇：更改或移動彈出式反應傳單的位置