-
Jan 28th, 2014, 11:11 AM
#1
[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:
header { overflow: hidden; margin: 5px; width: 98%; } /* Search */ #searchContainer { float: left; margin-bottom: 0px; margin-left: 5px; margin-right: 5px; margin-top: 0px; padding: 0px; } /* Logo */ #imgLogo { float: left; vertical-align: middle; text-align: center; } /* User Information */ #userNav { float: right; }
What I'm trying to do is center my logo between the search area and the user information area, how can I do this?
-
Jan 28th, 2014, 05:33 PM
#2
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&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 ~
-
Jan 28th, 2014, 06:16 PM
#3
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.
-
Jan 28th, 2014, 06:42 PM
#4
Re: [HTML5/CSS] Center Image between two DIVs
-
Jan 29th, 2014, 03:10 PM
#5
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.
-
Jan 29th, 2014, 03:26 PM
#6
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|