I am striving to design a navigation bar that appears on both the right and left sides, with the title in between them and an image centered vertically with the text. I have used anchor links within a div for the navigation links, along with unordered lists and list items for sub-navigation.
What are some possible solutions to keep everything on one line and ensure the image is aligned vertically with the text?
For instance:
<div>
<a>LINK</a>
<a>LINK</a>
<h1>TITLE</h1>
<img>
<h1>TITLE</h1>
<a>LINK</a>
<a>LINK</a></div>
I have attempted to divide the div, ending it before the first <h1>
, then resuming after the second </h1>
.
For example:
<div>
<a>LINK</a>
<a>LINK</a>
</div>
<h1>TITLE</h1>
<img>
<h1>TITLE</h1>
<div>
<a>LINK</a>
<a>LINK</a>
</div>