试图让一些img按钮停留在中间的水平行中，但当我把它们放在中间时，堆栈会变为垂直的

Question

无论窗口大小，我都试图使img按钮的水平线保持在中间，但当我使按钮保持在中间时，它们不会保持水平，而是堆叠在垂直线中

我试着在页边空白处更改：使用不同的数字和代码我也尝试过制作显示器：屏蔽很多其他代码，但这是唯一一个将它们居中的代码，但它也是制作堆栈而不是一行的原因

html:

<div id="topborder"></div>
<div class="buttongroup">
<img src="icon/home.png" class="button" width="5%">
<img src="icon/about.png" class="button" width="5%">
<img src="icon/podcast.png" class="button" width="5%">
</div>

css：

.button{
border:1px solid ;
color: green;
opacity: 0.7 ;
transition: 0.3s ;
cursor: -webkit-grab;
margin:0 auto;
display:block; 
}
.buttongroup .button:hover {opacity: 1;}
.buttongroup {
width:100vw;
}

我希望img按钮保持在中间的水平线上

Answer 1

尝试在按钮类中使用display:inline-block而不是display:block。还添加了text-align:center，使div成为主类的中心。

.button {
border: 1px solid;
color: green;
opacity: 0.7;
transition: 0.3s;
cursor: -webkit-grab;
margin: 0 auto;
display: inline-block;
}
.buttongroup .button:hover {
opacity: 1;
}
.buttongroup {
width: 100vw;
text-align:center;
}

<div id="topborder"></div>
<div class="buttongroup">
	<img src="https://via.placeholder.com/150" class="button" width="5%">
	<img src="https://via.placeholder.com/150" class="button" width="5%">
	<img src="https://via.placeholder.com/150" class="button" width="5%">
</div>

Answer 2

要确保它们总是在一行中，请使用flexbox:

.buttongroup {
display: flex;
align-items: center;
}

此外，你的过渡不会起作用，因为它没有应该转换的属性。