Question

我的最终结果是左右两边都有导航，标题之间有一个标题。我在div中使用a-hrefs作为与uls和lis的链接作为我的subnavs。

有哪些选项可以将所有内容保存在一行中，并且图像与文本垂直居中。

示例：

rs.initiate()

我试图将div放在结束<div> <a>LINK</a> <a>LINK</a> <h1>TITLE</h1> <img> <h1>TITLE</h1> <a>LINK</a> <a>LINK</a></div>所在的div的第一部分，然后在第二个标题< h1>之后重新拾取它。

示例：

< /h1>

Answer 1

虽然这不是最佳实践，因为您在示例中已经完成了，但为了简单回答，您只需将CSS vertical-align: middle添加到title / logo包装器即可。像这样：

HTML部分：

<div class="menu">
  <a href="#">Link</a> 
   <a href="#">Link</a>
   <a href="#">Link</a>
   <div><h1>Your title <img  src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Internet_Explorer_7_Logo.png/64px-Internet_Explorer_7_Logo.png" style="width:64px; height:64px; vertical-align:middle"> Your title</h1></div>
   <a href="#">Link</a>
   <a href="#">Link</a>
   <a href="#">Link</a>
</div>

和CSS：

.menu { text-align: center; }
.menu a, .menu div { display: inline-block; }
.menu a { margin: 0px 5px; }
.menu div { font-size: 20px; font-weight: bold; margin: 0px 20px; vertical-align:middle}

以下是codepen中的示例演示 - http://codepen.io/anon/pen/JdzvgK

并且，顺便说一句 - 是的，这是有效的代码 - 你可以安全地将IMG放在H1内。甚至W3自己也在他们的标题中使用这种做法 - http://www.w3.org/：）

Answer 2

试试这种方式

 <div >
     <a style="float:left">LINK</a>
     <a style="float:left">LINK</a> 
     <h1 style="float:left">TITLE</h1> 
     <img style="float:left"> 
     <h1 style="float:left">TITLE</h1> 
     <a  style="float:left">LINK</a> 
     <a  style="float:left">LINK</a>
 </div>

Answer 3

一种很常见的做法是使用ul结构。它给你一些不错的结构。

我在这里给出了一个大纲： How to style more than one ul（用于导航）

并且还提供了此链接（互联网上有很多导航示例）： http://www.noupe.com/essentials/freebies-tools-templates/100-great-css-menu-tutorials.html

如何将导航，标题和图像放在一行？

3 个答案: