html - 在 bootstrap5 中居中图像
问题描述
我是 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" alt="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" alt="Facebook Aulas21" 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>
解决方案
<!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" alt="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" alt="Facebook Aulas21" 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>
推荐阅读
- ruby-on-rails - 如何在 Rails 中实现嵌套下拉菜单
- matlab - 随机森林:缺失值
- google-ads-api - 运行 Getcampaign.java 时 Google Ads Api 出现错误
- java - 旋转屏幕时,曲面视图中的视频无法正确显示
- node.js - 通过桌面图标运行 bash 脚本时找不到节点命令
- android - 使用 Kotlin 防止智能手机硬关机
- amazon-web-services - 获取 Non Expiry S3 URL 以将其存储到 dynamodb flutter
- android-studio - 如何在 android studio 中禁用字段访问器对话框?
- reactjs - 使用 react 和 mapbox gl 或 maplibre gl 动态加载标记
- curl - curl hhtp 使用 api 密钥发布对 json 数据类型的请求