How to Center a Header Image

CSS - centering image and header

Just add display: flex and align-items: center to your #banner

from

#banner{
margin: auto;
}

#banner {
    margin: auto;
    display: flex;
    align-items: center;
}

center image in header

In your site example you have body, table.body, h1, h2, h3, h4, h5, h6, p, td with property text-align:left. and get rid of of display: block; float: left; from your img class.

Note that if you will make text-align:center it will affect the whole form. so make another class for it.

How to center a logo image inside a header

Good morning!

Usually you want to control the nav ul and nav ul li elements appearance together without using floats and heavy padding. take a look at my revisions here. For the logo, you can just put it into an li element:

body {    font-family: 'Open Sans', sans-serif;    background-color: #f3f3f3;    color: #666;    margin: 0px;    padding: 0px;}
#Page {    padding-top: 100px;}

header {    background-color: #1c1c1b;    font-family: 'Century gothic';    font-size: 180%;    height: 140px;    width: 100%;    border-bottom: solid;    border-bottom-color: #009641;    border-bottom-width: 5px;    position: fixed;    line-height: 50px;    z-index: 1000;}
nav {}nav ul{ text-align: center; display: table; }
nav li {    display: table-cell; vertical-align: middle; padding: 0 10px;}
nav li a {    color: #009641;    text-decoration: none;}
nav li a:hover {    color: #FFF;}

<body id="chesters">
    <header>        <nav>            <ul>            <li><a href="Menu.html">Menu</a></li>            <li><a href="Burritos.html">Burritos</a></li>     <li><img class="header-image" src="chesters.png"></li>            <li><a href="Contact.html">Contact Us</a></li>            <li><a href="About.html">About Us</a></li>               </ul>        </nav>    </header>
<div id="Page">

</div> <!-- Page -->
</body>

Can't center header image with CSS no matter what

The best solution is to:

#cutewp-logo {
  margin-left:25%;//delete this
  margin-right:25%;//delete this
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;//delete this
  width: 100vw;//add this
}

The element isn't centering because it doesn't occupy the full width of the screen therefore has no reference on to be centered to

How to Center a Header Image

CSS - centering image and header

center image in header

How to center a logo image inside a header

Can't center header image with CSS no matter what

Related Topics

Leave a reply