在引导程序 5 中居中图像
Posted
技术标签:
【中文标题】在引导程序 5 中居中图像【英文标题】：Centering an image in bootstrap5 【发布时间】：2021-12-12 01:51:48 【问题描述】：我是 Bootstrap 的新手，我有一个非常简单的网络，只有一个导航。我希望页面使用导航按钮进行响应。但是当我部署菜单时，facebook 徽标没有居中，我猜这是因为 a 标签更大。
.imagen-logo
width: 4rem;
transition: all 0.25s;
.facelogo
width: 3rem;
height: 3rem;
transition: all 0.25s;
.facelogo:hover
width: 3.5rem;
height: 3.5rem;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aulas21 - Inicio</title>
<link rel="icon" href="logo.ico">
<link rel="stylesheet" type="text/css" href="estilo.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<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=Georama:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<nav class="navbar sticky-top navbar-expand-sm navbar-light " style="background-color: #e3f2fd;">
<a class="navbar-brand" href="index.html" >
<img src="logo.png" title="Aulas21" class="imagen-logo">
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<div class="navbar-nav m-auto text-center">
<a class="nav-link active " aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link">Disabled</a>
</div>
<div class="d-flex flex-row justify-content-center">
<a class="navbar-brand" href="https://www.facebook.com/aulas21rosario/" >
<img src="facebooklogon.svg" title="Facebook" class="facelogo imgfluid d-block mx-auto">
</a>
</div>
</div>
</nav>
<div class="container">
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</html>【问题讨论】：
【参考方案1】：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aulas21 - Inicio</title>
<link rel="icon" href="logo.ico">
<link rel="stylesheet" type="text/css" href="estilo.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<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=Georama:wght@300&display=swap" rel="stylesheet">
<style>
.imagen-logo
width: 4rem;
transition: all 0.25s;
.facelogo
width: 3rem;
height: 3rem;
transition: all 0.25s;
.facelogo:hover
width: 3.5rem;
height: 3.5rem;
</style>
</head>
<body>
<div class="wrapper container">
<div class="row">
<nav class="navbar sticky-top navbar-expand-sm navbar-light " style="background-color: #e3f2fd;">
<a class="navbar-brand" href="index.html" >
<img src="https://i.ibb.co/HLvLdCR/facebooklogon.png" title="Aulas21" class="imagen-logo">
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<div class="navbar-nav m-auto text-center">
<a class="nav-link active " aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link">Disabled</a>
</div>
<div class="d-flex flex-row justify-content-center">
<a class="navbar-brand" href="https://www.facebook.com/aulas21rosario/" >
<img src="https://i.ibb.co/HLvLdCR/facebooklogon.png" title="Facebook" class="facelogo imgfluid d-block mx-auto">
</a>
</div>
</div>
</nav>
</div>
<div class="container">
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</html>【讨论】：
你改变了什么？ 这段代码不能解决我的问题 :( 谢谢你 正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。以上是关于在引导程序 5 中居中图像的主要内容，如果未能解决你的问题，请参考以下文章