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对齐方式不起作用

回答

相关问题