我有一个导航条，它是完美的中心与此代码。
<nav class="navbar navbar-light bg-light text-primary navbar-personalized w-100 justify-content-center navbar-personalized">
<div class="row">
<a class="navbar-brand">
My WebSite
</a>
</div>
</nav>
现在我想在里面添加一个div，是可以点击的。
<nav class="navbar navbar-light bg-light text-primary w-100 justify-content-center navbar-personalized">
<div class="row">
<a class="navbar-brand">
My Web Site
</a>
<div id="messageAdministrateur" onclick="alert('This is an alert')" style="color:red;text-align: center;width: 100%;">
<b>WARNING, NEW MESSAGE<br>CLICK</b>
</div>
</div>
</nav>
我想将两者居中，但只有 WARNING, NEW MESSAGE CLICK 是居中的，而不是 My Web Site. 如何将两者居中？这是一个工作实例。https:/jsfiddle.netg2ea36rn
你需要在行后创建列。所以只需为每个div添加一个col-12，并将文本样式居中。
<div class="row">
<div class="col-12">
<a class="navbar-brand">
My Web Site
</a>
<div id="messageAdministrateur" onclick="alert('This is an alert')" style="color:red;text-align: center;width: 100%;">
<center><b>WARNING, NEWdd MESSAGE</b></center><b><center>CLICK</b></center>
</div>
</div>
</div>
.navbar-personalized{
position: absolute !important;
top: 0;
left: 0px;
}
.row {
text-align: center;
}
你只需要添加以下样式在 div 在你 nav. 在这里你可以使用 flex 以使你的内容居中。并将其置于屏幕中央，设置为 width 到 100%
style="display:flex; justify-content:center; width:100%"
.navbar - personalized {
position: absolute!important;
top: 0;
left: 0 px;
}<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="My WebSite">
<link rel="icon" href="ressources/favicon.ico" />
<title>My WebSite</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="ressources/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
<style>
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div >
<nav class="navbar navbar-light bg-light text-primary w-100 navbar-personalized">
<div class="row" style="display:flex; justify-content:center; width:100%">
<a class="navbar-brand">
My Web Site
</a>
<div id="messageAdministrateur" onclick="alert('This is an alert')" style="color:red;text-align: center;width: 100%;">
<center><b>WARNING, NEW MESSAGE</b></center><b>
<center>CLICK
</b></center>
</div>
</div>
</nav>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ex dolor, malesuada vitae semper a, imperdiet eu sapien. Aenean volutpat congue mi, eu consequat nisl maximus nec. Suspendisse pharetra suscipit lorem a iaculis. Duis efficitur libero vitae purus
interdum viverra quis nec est. Ut et ante et justo posuere hendrerit. Ut eu mauris at mi egestas rhoncus non vitae magna. Etiam a vehicula nisl, vel convallis lacus. Sed at urna sit amet enim tempor condimentum. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
</div>
</body>
</html>