CSS對齊方式不起作用

對於我而言，我無法解決這個問題。希望這對你們中的一個人來說很容易。CSS對齊方式不起作用

在這一點上，我主要是想獲得「知音語音信箱」形象在「寬」模式頂端正確內襯（圖像都是粗糙的 - 我不是關於擔心）：

圖像之間的分隔也太小了 - 我想我以後會嘗試使用不同大小的圖像，但我不認爲這樣可以解決這個問題。

上次我在這裏問一個問題時，人們提到使用Firebug。我在Safari中使用了相當的工具，但在這種情況下似乎並沒有幫助。

下面是CSS的最重要的部分：

img { 
    max-width: 100%; 
    padding-top: 0px; 
    padding-bottom: auto; 
} 

#hero_wrapper { 
    max-width: 100%; 
    position: relative; 
} 

box { 
    text-align: center; 
    max-width: 466px; 
}

下面是相應的HTML：

<div id="contact_wrapper"> 
    <box> 
    <div> 
     <img src="images/big_type_v2_011_06.jpg"> 
     <img src="images/big_type_v2_011_08.jpg"> 
    </div> 
    </box> 
    <box> 
    <div> 
     <img src="images/big_type_v2_011_12.jpg"> 
     <img src="images/big_type_v2_011_13.jpg"> 
    </div> 
    </box>   
</div>

完全CSS是here。

來源

2014-08-31 Damien Ivan

你爲什麼把文本內容轉換成圖片？你爲什麼要發明自己的HTML元素（''）？我認爲你應該多投入一些時間來學習一些HTML和CSS的基礎知識...... – CBroe 2014-08-31 00:55:17

如果你想垂直對齊內聯元素（如圖像），那麼用於該屬性的CSS屬性是'vertical-align'。 'auto'對於任何'padding'屬性都不是有效的值。 – CBroe 2014-08-31 01:04:25

我知道我使用很奇怪，但無論出於何種原因，它似乎給了我更好的結果。在這篇文章的以前版本中，我鏈接到了我所做的不同版本的網站，但該帖子被拒絕了，所以我儘可能地精簡了它。啊哈！ – 2014-08-31 06:51:10

你可以嘗試添加vertical-align屬性下面的CSS規則：

img { 
    max-width: 100%; 
    padding-top: 0px; 
    vertical-align: top; 
    display: inline-block; 
    margin: 30px; 
}

如果您使用您的圖像display: inline-block你可以得到圖像間距更好地控制這種方式頂部/底部的利潤率將產生預期的效果。

爲了便於說明：

enter image description here

來源

2014-08-31 01:14:42

啊！我以前曾嘗試過'display：block'，但它給我帶來不好的結果。不知道「內聯塊」，謝謝。 – 2014-08-31 06:54:38

歡迎您，請記住接受答案！ – 2014-08-31 12:39:12

是的，完成了。只是想確定第一。謝謝。 – 2014-08-31 20:46:16

CSS對齊方式不起作用

回答

相關問題