使用CSS居中3張圖像

有一組圖像需要在不同部分的同一行上水平居中。一個我想成爲一個特殊類型的圖像，實際上來自一個標籤。使用CSS居中3張圖像

我需要所有這些圖像，包括輸入標記圖像，始終以各自的div爲中心。

現在我的標記基本上是：

 <div class="col-xs-6 col-sm-3"> 
     <h1>Some centered text</h1> 
     <div class="image-container"> 
      <img class="contact-images" src="image1.png" /> 
      <img class="contact-images" src="image2.png" /> 
      <div class="email-image"> 
        <form action="contact-team-member.php" method="POST"> 
         <INPUT TYPE="hidden" NAME="1" VALUE="one"> 
         <INPUT TYPE="hidden" NAME="2" VALUE="two"> 
         <input type="image" class="contact-images" src="image3.png" alt="Submit Form" /> 
        </form> 
      </div> 
     </div> 
    </div>

使用CSS：

.image-container { 
    text-align: center; 
} 
.contact-images { 
    display: inline-block; 
    padding: 5px; 
}

這是我發現在網上論壇建議，當我用Google搜索解決這個問題的CSS，遺憾的是它不爲我工作。

不幸的是，圖像居中，但都堆疊在彼此的頂部 - 不在一條水平線上。我認爲這是由輸入圖像造成的。

這是從我的網站的實際圖像：

enter image description here

來源

2014-10-05 Zach Cook

只是在我的問題中的錯字！對不起，它現在修復@misterManSam – 2014-10-05 10:18:50

網站是http://texasca.com/team不想分享它到廣泛，但我會把鏈接作爲現在的評論 – 2014-10-05 10:28:04

開始：第67行的team.css' .employee-profile img'目前是'display：block'更改爲嵌入塊 – misterManSam 2014-10-05 10:30:08

JS Fiddle

在

給寬度，使他們不去對瀏覽器重新尺寸底部父的width也將減小，從而%將有助於檢查上面搗鼓

.contact-images { 
    display: inline-block; 
    padding: 5px; 
    width:20%; 
    height:auto; 
}

來源

2014-10-05 09:55:18

你忘了點在你的CSS規則...

.image-container { 
    text-align: center; 
} 
.contact-images { 
    display: inline-block; 
    padding: 5px; 
}

來源

2014-10-05 09:52:18

這只是在輸入問題的錯誤，我的實際CSS有點，謝謝指出雖然！ – 2014-10-05 10:16:11

使用本demo

.image-container { 
    text-align: center; 
} 
.contact-images { 
    display: inline-block; 
    padding: 5px; 
}

來源

2014-10-05 09:53:47

是的，我不明白它爲什麼它在小提琴工作不在我的網站:( – 2014-10-05 10:16:49

你可以請提供鏈接到您的網站？ – 2014-10-05 10:20:25

http://texasca.com/team @Tambo – 2014-10-05 10:27:17

試試這個http://jsfiddle.net/0sqkpg9t/你忘了加在你的css

.image-container { 

background-color:gold; 
width:500px; 
height:220px; 
text-align: center; 
} 
.contact-images { 

width:200px; 
height:200px; 
display: inline-block; 
}

來源

2014-10-05 09:55:25 Akshay

使用CSS居中3張圖像

回答

相關問題