水平对齐HTML标头元素

Question

我希望对此有所帮助。 我在div中有4个元素。 到目前为止，它们彼此堆叠，但我希望它们对齐。 #ninesixty是放置它们的div。非常感谢（：

HTML

<header>
    <div id="ninesixty">    
        <h1 id="home_link">HOME</h1>
        <h1 id="projects_link">PROJECTS</h1>
        <img id="logo" src="images/logo.png"/>
        <h1 id="services_link">SERVICES</h1>
        <h1 id="contact_link">CONTACT</h1>
    </div>
</header>

CSS

header
{
background-color:white;
text-align:center;
}

#ninesixty
{
    height:900px;
    width:960px;
    margin-top:40px;
    background-color:white;
    margin: 0 auto;
    text-align:center;
    border-radius:8px;
    display:inline-block;
}

Answer 1

添加display:inline-block; 到所有h1，img标记以使其内联。

h1,img{
   display:inline-block;
}

小提琴

Answer 2

display: inline-block应该在您要内联的元素上，而不是在其容器上。 它不是继承的属性。

#ninesixty h1 { display: inline-block; }

http://jsfiddle.net/xx9n9/

Answer 3

将类内联添加到div中的所有元素

.inline
{
        display:inline-block;
}


<header>
    <div id="ninesixty">    
        <h1 id="home_link" class='inline' >HOME</h1>
        <h1 id="projects_link" class='inline' >PROJECTS</h1>
        <img id="logo" class='inline'  src="images/logo.png"/>
        <h1 class='inline'  id="services_link">SERVICES</h1>
        <h1  class='inline' id="contact_link">CONTACT</h1>
    </div>
</header>

Answer 4

您需要为他们指定一条规则

h1 { display: block; float; left;}

Answer 5

在页面上多次使用H1不是一个好主意

如果您将其更改为可以使用这样的类

HTML

<header>
    <div id="ninesixty">    
        <div id="home_link">HOME</div>
        <div id="projects_link">PROJECTS</div>
        <img id="logo" src="images/logo.png"/>
        <div id="services_link">SERVICES</div>
        <div id="contact_link">CONTACT</div>
    </div>
</header>

CSS

#ninesixty div
{
    display: inline-block;
}