How to put Nav, Title and Image in one line? - html

Question

My end result is to have my nav on both the right and left, with the the title between them with an image between the title. I use a-hrefs in a div as the links with uls and lis as my subnavs.
What are the options to keep it all on one line and the image centered vertically with the text.
Example:
<div>
<a>LINK</a>
<a>LINK</a>
<h1>TITLE</h1>
<img>
<h1>TITLE</h1>
<a>LINK</a>
<a>LINK</a></div>
I have tried to slip the div up ending the first part of the div where the < h1> goes, then picking it back up after the second title < /h1>.
Example:
<div>
<a>LINK</a>
<a>LINK</a>
</div>
<h1>TITLE</h1>
<img>
<h1>TITLE</h1>
<div>
<a>LINK</a>
<a>LINK</a>
</div>

Answer 1

try this way
<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 2

Although that is not the best practice as you have done it in your example, but for the sake of simple answer you can just add CSS vertical-align: middle to title/logo wrapper. Like this:
HTML part:
<div class="menu">
Link
Link
Link
<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>
Link
Link
Link
</div>
And 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}
Here is sample demo in codepen - http://codepen.io/anon/pen/JdzvgK
And, btw - YES, this is valid code - you can safely put IMG inside H1. Even w3 themselfs is using this practice in their header - http://www.w3.org/ :)

Answer 3

A pretty common practice is to use a ul structure. It give you some nice structure.
I gave an outline here:
How to style more than one ul (it is for a nav)
And also provided this link (there are lot of nav oriented example on the internet):
http://www.noupe.com/essentials/freebies-tools-templates/100-great-css-menu-tutorials.html