WordPress.org

Ready to get started?Download WordPress

Forums

Center header image (5 posts)

  1. kevinco1
    Member
    Posted 2 years ago #

    This might sound basic, but since the CSS is using float, I'm not sure how to center the image properly. Our site is http://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;
    }

  2. kevinco1
    Member
    Posted 2 years ago #

    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%;
    }

  3. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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.

  4. playing2012
    Member
    Posted 2 years ago #

    Try this code:

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

    Good luck.

  5. colorvila
    Member
    Posted 2 years ago #

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

    That may work.

Topic Closed

This topic has been closed to new replies.

About this Topic