html - 垂直与水平对齐图像

Question

我正在尝试并排重新排列图像，而不是垂直排列。我看过CSS - center two images in css side by side ，无济于事。我来自该链接的代码如下:

HTML:

<!-- Naviational Bar -->
<div width="100%" height="25%">
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
</div>

CSS:

/*Header and Navigational Bar*/
h1.heading {
    padding: 10px;
    text-align: center;
    font-family: 'Signika', sans-serif;
}

.btn {
    /*display: inline-block;*/
    margin-left: 10%;
    margin-right: 10%;
}

/*Define Button Attributes*/
.navigational-item {
    width: 7%;
    height: auto;
    border-radius: 10px;
    position: relative;
    -webkit-filter: contrast(50%);
    z-index: 100;
}
span.navigational-item {
    font-family: sans-serif;
    color: red;
}

.nav {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

这就是它的样子:

有什么办法可以将图像并排放置，它们之间有 10 像素的边距吗？

提前致谢!

Answer 1

尝试以下“btn”类代码:

.btn {      
    margin-left: 10px;            
    margin-right: 10px;
    float:left;
}