How to align this header on the middle using css

2 Views

I am using the bombax wordpress theme. As the description isn’t showing up when I use an image for header, I decided to tweak the html/css to show the site slogan on the middle of the header.

This is the site:
http://www.noticiasnaturais.com/

Read More

This is the image I want to center (without overlapping the logo at left, the leaves with site name):
http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png

This is the original theme html: 

<div id="headerwrap">
    <div class="clear"></div>
    <a href="http://www.noticiasnaturais.com/" title="Notícias Naturais" style="color: rgb(51, 51, 68);">
       <img src="http://www.noticiasnaturais.com/wp-includes/images/logoHeader.png" alt="Notícias Naturais" title="Notícias Naturais">
    </a>
 </div>

I then tried to change as follows, adding adiv around the href to float it to the left, add an outer div to float to the right (filling the rightmost space), and a third div to be aligned at the middle. 

<div id="headerwrap">
    <div class="clear"></div>
    <div style="float:left"><a href="https://www.noticiasnaturais.com/" title="Notícias Naturais" style="color: rgb(51, 51, 68);">
   <img src="http://www.noticiasnaturais.com/wp-includes/images/imagefile" alt="Notícias Naturais" title="Notícias Naturais">
    </a></div>
   <div style="float:left;height: 100%";align=center><img src="https://i.stack.imgur.com/JzdyG.png">
   </div>
</div>

Edit: Just clarifying the question, I need the image with the text to be on the right side of the logo. At this moment I have it directly on the background image, but that doesn’t work for all screen resolutions. None of the suggestions (so far) could get it right.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. I’m not 100% sure of what you are asking, but I think what you need to do is this:

       <div style="float:left;height: 100%; margin-left:auto; margin-right:auto;">

    That should center the image.

  2. When you remove float: left from the div and add clear: both; text-align: center, it stretches over the whole width and stays below the leaves image. Then you have the centered image 

    <div style="clear: both; height: 100%; text-align: center">
    <img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png">
</div>

    JSFiddle

    Note, that the align attribute is deprecated.

    Update:

    When you want the text image stay on the same line, you must give a minimum width to the div and center as before with text-align: center

    HTML 

    <div id="middle">
    <img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png">
</div>

    CSS 

    #middle {
    min-width: 800px;
    text-align: center;
}

    JSFiddle