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;
}

这就是它的样子：

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

提前致谢！

Answer 1

尝试以下代码＆＃34; btn＆＃34;类：

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

Answer 2

您需要将按钮放入这样的容器div中:(此处任意设置宽度为30％ - 相应地进行编辑）

<div width="100%" height="25%">
  <div id="container" style="width:30%;margin:auto">
    <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>
</div>

然后将按钮的display属性设置为inline-block：

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

请在此处查看笔：http://codepen.io/Bangkokian/pen/eppbYL

Answer 3

看看这个基本想法：

#container {
  text-align: center;
}

.btn {  
  display: inline-block;
}

.nav {
  margin: 0 10px;
}

/* Below is trivial for reszing */

.navigational-item {
  width: 50px;
}

http://codepen.io/anon/pen/wKKRMe?editors=110

Answer 4

你知道图像的参数吗？如果是这样我们会这样做

<div class="image_container">
    <div class="center">
        <div class="btn">
            <img src="">
        </div>
    </div>
</div>

CSS：

.image_container { position: relative }
.center {
    position:absolute;
    left:50%;
    width: 970px;
    margin: 0 0 0 -485px;
    /*margin left is width / 2*/
} 
.btn {
    display:inline-block;
    margin: 0 10px 0 10px;
}

DEMO HERE

http://jsbin.com/fexasivori/1

<强> EDITED 更新了链接和CSS我错误地为margin-left参数写了错误的数学。 970除以2不是435 485

水平垂直对齐图像

4 个答案: