Center header image

  • This might sound basic, but since the CSS is using float, I’m not sure how to center the image properly. Our site is https://www.vipbeautypasadena.com

    As you see, the logo is on the right side which we dont want, we need it to be centered. Heres the code, how do i go about doing this?

    /* Header
    ————————————————————– */
    #header {
    clear: both;
    float: left;
    width: 100%;
    margin: 40px 0 40px 0;
    }
    #branding {
    float: left;
    width: 35%;
    overflow: hidden;
    }
    #site-title {
    font-size: 3em;
    line-height: 1em;
    font-weight: bold;
    margin: 0 0 5px 0;
    word-wrap: break-word;
    }
    #site-title a {
    color: #222;
    border-bottom: none;
    }
    #header img { max-width: 100%; }
    #site-description {
    font-size: 1.333333333333333em;
    font-weight: normal;
    line-height: 1.5em;
    margin: 0;
    color: #aaa;
    text-transform: none;
    float: left;
    width: 91.48936170212766%;
    clear: both;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter kevinco1

    (@kevinco1)

    This may be where the code for that is located as well:

    /* Home page
    ————————————————————– */
    #masthead{
    width: 100%;
    float: left;
    margin-bottom: 40px;
    }
    #author-bio {
    float: left;
    width: 27.65957446808511%;
    }
    #header-banner {
    width: 68.08510638297872%;
    float: right;
    }
    #header-banner img {
    max-width: 100%;
    }

    You can center that by removing the “float: right” and adding the margin as below in the style.css file on
    line 685

    #header-banner {
    float: right;
    margin: 0 auto;
    width: 68.0851%;
}

    Also, FYI, you are not supposed to post more than 10 lines of code on the forums and should always use the code or backticks for code. Use pastebin for more than 10 lines. Also, when you post a link to your site, there is not reason to post CSS code — anyone can see it in your site.

    Try this code:

    #branding {
	float: none;
	width: 35%;
	margin: 0 auto;
	text-align: center;
}

    Good luck.

    #branding {
	float: none;
	width: 35%;
	margin: 0 auto;
	text-align: center;
}

    That may work.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Center header image’ is closed to new replies.