對齊圖像垂直平鋪在

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

這是什麼樣子：

是我有什麼辦法可以放置ima他們之間有10px的邊距並排排列？

提前致謝！

Answer 1

試試下面的代碼爲「BTN」類：

.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> 

然後設置你的按鈕的顯示屬性設置爲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這裏

http://jsbin.com/fexasivori/1

EDITED 更新的鏈接，我錯誤地寫了CSS的錯誤的數學爲左邊界參數。 970除以2是不是435這是485