html - 试图让一些 img 按钮在中间保持水平线但是当我把它们放在中间时堆栈垂直

Question

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

我试过改变 margin: 到不同的数字和代码我也试过制作 display:block 很多其他代码，但这是唯一将它们居中的代码，但它也是制作堆栈而不是排成一行的原因

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

尝试在button 类中使用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>