css - 水平对齐 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;
}

FIDDLE