CSS，div对齐问题 [英] CSS, Div Alignment Issue

问题描述

我有两个div组成标题，分别是 #title 和 #header 。它们位于 #totalTop 中。它们应与顶部齐平，并且彼此应齐平。外观如下：

解决方案

我认为您需要在显示器上使用 vertical-align：top ：内联块元素

应该解决这个问题。

如果不是那样，请尝试删除HTML标记内的所有空白

（这是一个已知问题）

我不确定，因为您没有显示所有相关代码。

I have two divs that make up my header, #title and #header. They are inside #totalTop. They should be flush against the top, and they should be flush against each other. Here's how it looks like:

http://i53.tinypic.com/2ykj0b7.jpgy

Here's the CSS code for the relevant part:

#totalTop {
text-align: center;
}
#title {
background-image: url(../img/TopBannerGradientOrange.png);
border-bottom-color: #FFF;
text-align: center;
border-bottom-style: solid;
border-bottom-width: 3px;
background: url(../img/TopBannerGradientOrange.png);
height: 150px;
width: 20%;
font-size: 25px;
display: inline-block;
}
#header {
border-bottom-color: #FFF;
border-bottom-style: solid;
border-bottom-width: 3px;
background: repeat-x;
background: url(../img/TopBannerGradientOrange.png);
width: 60%;
text-align: center;
height: 150px;
display: inline-block;
margin-top: 0;
}

How can I get them to fit together? I already have reset.css in my full stylesheet.

Edit:

Added the vertical-align: top;, so now it only looks like this sort of gap between elements. It's about 3-4px and with Chrome's Inspect Tool I can't figure out whether it is #title or #header that's causing the problem:

解决方案

I think you need vertical-align: top on your display: inline-block elements.

That should sort it out.

If it's not that, try removing all whitespace inside your HTML markup around those elements.
(it's a known issue)

I'm not sure because you haven't shown all the relevant code.

这篇关于CSS，div对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！