Results 1 to 6 of 6

Thread: [RESOLVED] [HTML5/CSS] Center Image between two DIVs

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,711

    Resolved [RESOLVED] [HTML5/CSS] Center Image between two DIVs

    I'm having an issue trying to center an image between two DIV elements. Currently this is my html and css:
    HTML Code:
    		<!-- Header -->
    		<header>
    			<!-- Search -->
    			<div id='searchContainer'>
    				<input name='searchTextBox'></input>
    				<button name='searchButton'>Search</button>
    			</div>
    			
    			<!-- Logo -->
    			<img alt='Logo Name' id='imgLogo' src='#'></img>
    			
    			<!-- User Info -->
    			<nav id='userNav'>
    				<a id='login' href='#'>Sign In/Join</a>
    				<a id='cart' href='#'>Shopping Cart</a>
    				<a id='checkout' href='#'>Check Out</a>
    			</nav>
    		</header>
    My CSS looks like this:
    css Code:
    1. header {
    2.     overflow: hidden;
    3.     margin: 5px;
    4.     width: 98%;
    5. }
    6.  
    7. /* Search */
    8. #searchContainer {
    9.     float: left;
    10.     margin-bottom: 0px;
    11.     margin-left: 5px;
    12.     margin-right: 5px;
    13.     margin-top: 0px;
    14.     padding: 0px;
    15. }
    16.  
    17. /* Logo */
    18. #imgLogo {
    19.     float: left;
    20.     vertical-align: middle;
    21.     text-align: center;
    22. }
    23.  
    24. /* User Information */
    25. #userNav {
    26.     float: right;
    27. }

    What I'm trying to do is center my logo between the search area and the user information area, how can I do this?
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: [HTML5/CSS] Center Image between two DIVs

    Hi there dday9,

    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style> 
    header {
        width:98%;
        min-width:630px;
        margin:5px;
        text-align:center;
        line-height:63px; /* height of image */
     }     
    #searchContainer {
        float:left;
        margin:0 5px;
     } 
    #imgLogo {
        width:64px;
        height:63px;
     }   
    #userNav {
        float:right;
     }
    </style>
    
    </head>
    <body>
    
    <header>
    
    <div id="searchContainer">
     <input type="text" name="searchTextBox">
     <!-- don't use button as it has line-height problems in IE -->
     <!--<button name="searchButton">Search</button> -->
     <input type="button" name="searchButton" value="Search">
    </div>
    
    <img id="imgLogo" src="http://www.vbforums.com/image.php?u=134734&amp;dateline=1346790653" alt="Logo Name">			
    
    <nav id="userNav">
     <a id="login" href="#">Sign In/Join</a>
     <a id="cart" href="#">Shopping Cart</a>
     <a id="checkout" href="#">Check Out</a>
    </nav>
    			
    </header>
    
    </body>
    </html>


    ~ the original bald headed old fart ~

  3. #3

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,711

    Re: [HTML5/CSS] Center Image between two DIVs

    Hmm thank you for the comments in the code explaining stuff. When I get to my computer tomorrow that has my HTML work on it I'll try this out.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  4. #4
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: [HTML5/CSS] Center Image between two DIVs

    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  5. #5

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,711

    Re: [HTML5/CSS] Center Image between two DIVs

    I did what you suggeste Coothead, including changing the button to an input(and setting it's type) and it works perfectly.

    I decided against using the flexbox due to mobile support issues. Thank you for the suggestion regardless.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  6. #6
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: [HTML5/CSS] Center Image between two DIVs


    No problem, you're very welcome.


    ~ the original bald headed old fart ~

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width