如何将多张图片放在锚标签内居中
如何将多张图片放在锚标签内居中
提问于 2019-02-25 20:55:32
我希望图像居中，但无法在medium、large和extra-large屏幕上执行此操作
<nav class="navbar">
<div class="row">
<div class="col-12 d-flex justify-content-center">
<a href="/html"><img src="./images/devices.png" alt="devices"></a>
<a href="/html"><img src="./images/media.png" alt="media"></a>
<a href="/html"><img src="./images/logo.png" alt="logo"></a>
<a href="/html"><img src="./images/stream.png" alt="stream"></a>
<a href="/html"><img src="./images/logout.png" alt="logout"></a>
</div>
</div>
</nav>我尝试了stackoverflow网站上提供的不同解决方案，但都没有奏效。请帮帮忙，我是新手
回答 1
Stack Overflow用户
发布于 2019-02-25 22:15:00
我真的不明白你需要什么，但我想你可以参考以下两页：
通常，导航是具有多个链接或下拉式菜单的栏。所以我不认为这是合理的。
下面是两个例子，其中一个是我水平排列的.nav类。一个是我垂直排列的.navbar类。
项目的内容居中。
希望这能有所帮助。
.navbar, .nav {
background-color: #A4A4A4;
border: 1px solid red;
}
/* for the purpose of demonstration, I added borders to the Nav-ul */
#top-menu {
border: 1px solid red;
}
.nav-link {
width: 100px;
text-align: center;
/* for the purpose of demonstration, I added borders to the list items */
border: 1px solid black;
}
.dont_copy_this {height: 50px;}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="nav">
<div class="row">
<div class="col-12 d-flex justify-content-center">
<a class="nav-link" href="/html"><img src="./images/devices.png" alt="devices"></a>
<a class="nav-link" href="/html"><img src="./images/media.png" alt="media"></a>
<a class="nav-link" href="/html"><img src="./images/logo.png" alt="logo"></a>
<a class="nav-link" href="/html"><img src="./images/stream.png" alt="stream"></a>
<a class="nav-link" href="/html"><img src="./images/logout.png" alt="logout"></a>
</div>
</div>
</nav>
<div class="dont_copy_this"></div>
<nav class="navbar">
<ul id="top-menu" class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/html"><img src="./images/devices.png" alt="devices"></a></li>
<li class="nav-item"><a class="nav-link" href="/html"><img src="./images/media.png" alt="media"></a></li>
<li class="nav-item"><a class="nav-link" href="/html"><img src="./images/logo.png" alt="logo"></a></li>
<li class="nav-item"><a class="nav-link" href="/html"><img src="./images/stream.png" alt="stream"></a></li>
<li class="nav-item"><a class="nav-link" href="/html"><img src="./images/logout.png" alt="logout"></a></li>
</ul>
</nav>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54866713
复制相关文章
相似问题
腾讯云开发者
