在没有空间的情况下对齐中心的图像
在没有空间的情况下对齐中心的图像
提问于 2017-03-29 06:23:07
我想在页面导航栏的中心对齐徽标。
这是我的密码：
<div class="nav">
<ul>
<li id="center">
<a href="home.php"><img src="images/w_logo.gif"></a>
</li>
</ul>
</div>我在网上找到了这个解决方案：
#center img{
display: block;
margin: auto;
}但问题是，通过使用display:block属性，我在图像周围获得了空间，这增加了导航条的高度，而且我无法删除该空间。
我会感谢你的帮助。
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-03-29 06:35:03
看看这把小提琴。https://jsfiddle.net/5huhpxuk/
#center img {
display: block;
margin: auto;
}
.nav {
background-color: black;
line-height: 0%
}<div class="nav">
<ul>
<li id="center">
<a href="home.php"><img src="http://zdnet3.cbsistatic.com/hub/i/2015/09/01/cb834e24-18e7-4f0a-a9bf-4c2917187d3f/83bb139aac01023dbf3e55a3d1789ad8/google-new-logo.png"></a>
</li>
</ul>
</div>
Stack Overflow用户
发布于 2017-03-29 06:30:44
试试下面这样的方法。此方法将img设置为display: inline-block，使其成为内联元素，并允许它在父元素上声明text-align: center时对齐中心。
/*#center img {
display: block;
margin: auto;
}*/
#center {
text-align: center;
}
ul {
list-style: none;
margin: auto;
padding: 0px;
}
.nav {
background: #ddd;
border-bottom: 1px solid #bebebe;
}<div class="nav">
<ul>
<li id="center">
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=300%C3%97100&w=300&h=100"></a>
</li>
</ul>
</div>
额外的空间可能来自某个地方的流氓浏览器/供应商风格，值得关注的元素是ul和li，它们通常带有默认的padding & margin规则。
通过浏览器开发工具/IDE检查这些元素，并根据使用的浏览器查看“框模型”、“布局”或“计算样式”。
Stack Overflow用户
发布于 2017-03-29 06:36:24
#center img{
display: block;
margin: auto;
}
ul{margin:0;}
li{padding:0;list-style:none;}<div class="nav">
<ul>
<li id="center"><a href="home.php"><img src="https://dummyimage.com/50x50/000/fff"></a></li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43085837
复制相关文章
相似问题
腾讯云开发者
