How do I center my logo image to another div in CSS horizontally and vertically?
31,554
Solution 1
try something like this before using javascript!
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
or this!
.image_container {
width: 300px;
height: 300px;
background: #eee;
text-align: center;
line-height: 300px;
}
.image_container img {
vertical-align: middle;
}
Solution 2
I think I understand your question. Since you are calling out your logo img in the html, try this.
<div id="logo">
<img src="images/images/logo.gif" alt="logo" align="center"/>
</div>
Author by
user2445229
Updated on July 17, 2022Comments
-
user2445229 almost 2 years
I need help positioning a logo horizontally center. It also needs to be centered vertically to the top of my links
div
. Can someone help me?I'd like my logo to look like this:
Below is my HTML and CSS:
HTML - http://codebin.org/view/199faa14
<div id="container"> <div id="logo"> <img src="images/images/logo.gif" /> </div> <div id="navigation"> navigation </div> <div id="header"> </div> <div id="line"> </div> <div id="content"> content </div> </div>
CSS - http://codebin.org/view/dda88d94
body { background: url(../images/images/bg_page.gif) center center; } #container { width: 940px; margin: 0 auto; } #header { height: 281px; background: url(../images/home/header.gif) top center; position: relative; } #logo { position: absolute; z-index: 2; top: 0px height: 214px; margin: 10px auto 0 auto; } #navigation { position: relative; height: 40px; background: #fff; margin-top: 100px } #content { height: 541px; background: url(../images/home/bg_body.png) top center; position: relative; } #line { height: 4px; background: url(../images/home/line.gif) top center; position: relative; }
-
Maxim Manco almost 11 yearsThe align attribute is not supported in HTML 5 and is deprecated in HTML 4.01
-
ValleyDigital almost 11 yearsand in the CSS, you would need to change your code for the #logo img{ //enter code here }
-
user2445229 almost 11 yearsworked like a charm the first one thanks for the help much appreciated! i just put the logo into the navigation div and used it as container for it
-
Anze almost 11 yearsno prob! :) when you can set this post as the right answer if it solved your problems