HTML center image in the header - html

Question

I'm trying to make a header like this:
HOME ABOUT (LOGO HERE) CONTACTS LOGISTICS
l want everything to be in the middle of the page.
If anyone can help me or link me to a helpful website I would really appreciate it

Answer 1

You can use margin:0 auto for centering element in the page. Try the below code for develop your design.
http://codepen.io/ogzhncrt/pen/mJggdd
header {
width:700px;
margin:0 auto;
background-color:#999;
padding:10px;
height:20px;
color:#f4f4f4;
}
header ul {
list-style:none;
margin:0 auto;
}
header ul li {
display:inline-block;
float:left;
margin-left:20px;
}

Answer 2

The most simple, basic solution I can think of is using the <center> tag, and put the same padding trait for each of the elements. Play with the amount of padding to achieve exacly the distance you want between them. Example:
.distanced
{
padding:20px; /*will control the distance between the spans*/
}
<center style="background-color:#aaaaaa">
<span class="distanced"> HOME </span> <span class="distanced"> ABOUT </span> <span class="distanced"> LOGO </span> <span class="distanced"> CONTACTS </span> <span class="distanced"> LOGISTICS </span>
</center>

Answer 3

Using divs you can set up defined widths and place them into a container.
.container{
width:500px;
margin:auto 0;
}
.item{
margin-left:20px;
border:black solid 1px;
width:50px;
height:50px;
float:left
}
.search{
margin-left:20px;
border:black solid 1px;
width:100px;
float:left;
height:50px;
}
https://jsfiddle.net/bLxk96pq/ working example i just created

Answer 4

I recommend using tables in your script, they're easy to use and you can make some really cool things with them. You can use the answers above to make this centered. For example put this in the body:
<div id="menu">
<table>
<tbody><tr>
<td><b>HOME</b></td>
<td><b>ABOUT</b></td>
<td>*Put the logo here*</td>
<td><b>CONTACTS</b></td>
<td><b>LOGISTICS</b></td>
</tr></tbody>
</table>
</div>
And then this in the head/CSS (Border is optional, but it's really cool. Also, color and amount of padding is you choice):
div#menu {
background:red;
height:35px;
padding: 20px;
}
table {
width:100%;
border:3px solid black;
}
td, th {
border:3px solid black;
}

Answer 5

It follows the code is very simple, you simply use the logo as a menu item.
HTML
<div class="container">
<nav id="navbar" style="z-index: 100000" >
<ul>
<li> Home </li>
<li> About </li>
<li><img src="http://neows.com.br/nav-center-logo/logo.png" width="250" height="100" alt=""/></li>
<li> Contact </li>
<li> Logistc </li>
</ul>
</nav>
</div>
CSS
body {
width: 100%;
height: 100%;
font-family: 'Ariar', sans-serif;
color:#828282;
font-size: 18px;
max-width: 100%;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
width: 960px;
}
#navbar {
height: auto;
float: left;
position: relative;
top: 20px;
right: 0;
z-index: 100000;
width: 100%;
text-align: center;
}
#navbar ul {
padding: 0;
margin-bottom: 0;
margin-top: 0;
list-style: none;
margin: 0 auto;
}
#navbar ul li {
display: inline-block;
height: 22px;
}
#navbar ul li a {
font-size: 16px;
float: left;
color:#828282;
padding: 0 15px 0 15px;
line-height: 1.1;
text-decoration: none;
vertical-align: central;
font-weight: bold
}
#navbar ul li a:hover {
text-decoration: none;
color: #363636;
}
.space-item {
margin-top: 40px;
}
http://jsfiddle.net/furlanj1/zku320q3/