這就是我的網站目前的樣子:網站
現在，我正試圖獲得登錄& amp注冊按鈕與導航欄的其余部分在同一行。我在這里嘗試了一些事情，但沒有成功。試圖重新調整文本結束到左邊，保持文本結束的中心，并使用(這當然推動了導航欄的其余部分，這不是我想要的)。我也試著用關閉中心，但是當然這不會起作用，因為它在div中使用了一個樣式。我確實關閉了div，但是結果就是我展示的截圖。
我的html:
<!-- Navigation -->
<header class="p-3 text-bg-dark">
<div class="container" style="display: flex;justify-content: center;">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">Home</a></li>
<li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">API</a></li>
<li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">Terms</a></li>
<li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">FAQ</a></li>
<li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">Settings</a></li>
</ul>
</div>
</div>
<div class="text-end">
{% if current_user.is_authenticated %}
<a href="{{ url_for('accounts.logout') }}"><button type="button" class="btn btn-danger me-2" style="font-size: 16px !important;">Logout</button></a>
{% else %}
<a href="{{ url_for('accounts.login') }}"><button type="button" class="btn btn-primary" style="font-size: 16px !important;">Login</button></a>
<a href="{{ url_for('accounts.register') }}"><button type="button" class="btn btn-success" style="font-size: 16px !important;">Sign up</button></a>
{% endif %}
</div>
</div>
</div>
</header>我的自舉base.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SMS Simbi</title>
<!-- meta -->
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- styles -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="{{url_for('static', filename="styles.css")}}">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
{% block css %}{% endblock %}
</head>
<body>
{% include "navigation.html" %}
<div class="container">
<br>
<!-- messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
{% for category, message in messages %}
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
{{message}}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
</div>
<div class="col-md-4"></div>
</div>
{% endif %}
{% endwith %}
<!-- child template -->
{% block content %}{% endblock %}
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" type="text/javascript"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
{% block js %}{% endblock %}
</body>
</html>您需要做的是將header元素設置為您想要的高度，我放入10rem并添加類:d-flex、justify-content-center和align-items-center:
<header
class="p-3 text-bg-dark d-flex align-items-center justify-content-center"
style="height: 10rem"
>...</header>要使菜單居中，您可以將按鈕設置為絕對，并給它們添加一個“右”:
<div class="position-absolute" style="right: 1.25rem">
{% if current_user.is_authenticated %}
<a href="{{ url_for('accounts.logout') }}"
><button
type="button"
class="btn btn-danger me-2"
style="font-size: 16px !important"
>
Logout
</button></a
>
{% else %}
<a href="{{ url_for('accounts.login') }}"
><button
type="button"
class="btn btn-primary"
style="font-size: 16px !important"
>
Login
</button></a
>
<a href="{{ url_for('accounts.register') }}"
><button
type="button"
class="btn btn-success"
style="font-size: 16px !important"
>
Sign up
</button></a
>
{% endif %}
</div>