|
CSS - Centering Image In A Div
So I have 2 different background patterns that extend to infinity behind my logo.
Problem is, I could not center my logo in front of these two patters. Code: so it should display it like; Layer 1: Left Pattern Right Pattern Layer 2: Logo But instead, its displayed as; Layer 1: Left Pattern Right Pattern Layer 2: Logo I spent over an hour searching this on the internet. Any help appreciated, thanks! Code: .subcontent {
min-height:50px;
width:100%;
background:#00CC66;
}
.leftcontent {
min-height:50px;
width:50%;
float:left;
background:url(images/bg_lpattern.jpg) repeat-x;
}
.rightcontent {
min-height:50px;
width:50%;
float:left;
background:url(images/bg_rpattern.jpg) repeat-x;
}
<div class="subcontent" style="position:relative;">
<div style="margin-left:auto; margin-right:auto; width:400px; height:50px; position:absolute;">
<img src="images/logo.jpg" alt="Insert Logo Here" name="Insert_logo" width="200px" height="50px" />
</div>
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>
Similar TutorialsI have a div with background images. It is styled float:left. That is all fine. The div is sized at 50x50px. Inside this div is a smaller image. I want the image to appear centered of the div. I have tried everything I can think of w r t margins and padding but the image allways shows up in the upper left corner. Here is an example: Code: <div class='caltool' onmouseover="this.style.backgroundImage = 'url(images/litegearani.gif)';" onmouseout="this.style.backgroundImage = 'url(images/litegearstill.gif)';"> <a href="whatever.html" title="export to desktop calendar"><img style="margin: auto; height:16px; width:16px;" src="icon_export_vcal.png" width="16" height="16" border="0" /></a> </div> Here are the styles in the caltool class: Code: .caltool {
float: left;
background-image: url(../images/litegearstill.gif);
background-repeat: no-repeat;
background-position:center;
height:50px;
width: 50px;
}
How can I make the images be CENTERED over the gear background?? hello, i have this in my html: Code: <div id="link_image"> <a href="http://www.mylink.com/" target="_blank">My link with image </div> & here the css: Code:
#link_image a
{
display:block;
width: 130px;
height: 21px;
text-indent:-3000px;
overflow:hidden;
text-decoration:none;
background:url(images/image.jpg) 0 0 no-repeat;
padding: 7px;
background-color: #667700;
}
Now I would like that the image is right in the center of the background border with color #667700. Like now, it's just on the left side, not centered. thanks! My page has: 1) a left-sidebar which goes from the top-left corner and stretches down 2) a top-bar which goes from the edge of the left-sidebar and stretches all the way across to the right side of the page 3) a main content which covers the rest of the page I want to place an image in the center of the top-bar but so far it only is centered when the window is maximised...I want it to be centered no matter what size the window is. currently my css rules a Code: #topBar {
position: absolute;
height:15%;
text-align: center;
left:30%;
margin:0px auto;
}
the xhtml source code for the topBar and image is: Code: <div id="topBar"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> (the image id is just concerned with the size of the image at this time) any suggestions as to how to I can have the image centered within the <div>? some bright spark on Yahoo Answers failed to spot that I'm using xhtml (which tbf is only mentioned once) and told me to try: Code: <div id="topBar"> <p><center><img src="../logo1.jpg" alt="..." id="sirgLogo"/></center></p> </div> or Code: <div id="topBar" align="center"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> Unless I'm mistaken, these are possibilities which will cause w3's validator to throw up an error. For the record I'm using XHTML 1.0 Transitional and I presume my doctype declaration is correct as it was automatically generated by dreamweaver when I first made the document! I've been away for nearly three months and may have forgotten some of the basics of CSS. Today I added a banner photo to the top of my new bike club site, but cannot remember how to style it so that, when a visitor adjusts the width of their browser window, the banner photo sidles to the left or right to remain centered at the top of their window, along with the the bike club name and pull-down menus immediately below (see http://stallinswebdesign.com/vs/index.php). Can you suggest how I can style that banner photo so that it remains centered whenever a visitor stretches their browser window? I know you can view source to view my <div> structure and so forth; let me know if you'd like to see any parts of my style sheet. Thank you for your valuable time. Curtis Hello, I am a fan of css and use it all the time. My one and only one problem with it is centering an image in a column that has been floated right. I've tried numerous ways to do this, but none have worked. Usually I end up adding a 2 column table, fixing the right column with x px, then adding images in rows in the left table column. This really does not center the image for all screen sizes, but it does move the images to the left. Also, margin-right:xpx would do about the same thing. This long-winded explanation leads to my css question: Is there a way to center images in a column that has been floated right? Maybe I am over-looking the obvious. Regards, Lee Hi, I'm new to CSS and haven't been able to get this working. I have two layers, one for an image, and another for text that goes on top. The text is supposed to be centered and the image should be centered wrt the text. The problem is that sometimes a word in the text will be too long and there's overflow. When this happens, the image stays on the left and the text box gets larger. This way the image isn't right behind the center of the text. I tried using overflow: visible but this didn't change anything. Thanks for any help. How do i center the image both horizontally and vertically.... I have read the < ALIGN > has be depreciated and must use style, but STYLE="vertical-align:middle" dpesnt seem to work in either/both the < DIV > and < IMG > tags I am using an external CSS with a hiehgt of 168px, and calling the < DIV > block, then just using a < IMG > tag. How can i align the image int he middle?? There's probably a simple, obvious solution for this, but I'm having problems managing to get this to work. Here's the isse: I have a menu that basically looks like so: Home | Guestbook | Contact Us | Help I need to place an image beneath each menu item so that is centered directly below the text, to indicate which page the user is on (not my design; I don't want to hear about it). I can not use tables for this - the menu items are pulled out of a database, and are generated in a loop; I also can't use some sort of div that requires a set width for each menu item, due to the fact that the menu items are all of variable widths. Ideas? Hi all, I am having trouble getting an image to go where I want it to, which is flush up against the top of the page and horizontally centered. I originally accomplished this a few years ago on my website, but now I am trying to do a new build, and this time around the code I used last time is not working! The working image can be seen here, it is the banner logo displayed at the top of the page. It's currently perfectly set, and all I want is to have that again on a new page. However, when I simply copy/paste the old code onto that new page, it doesn't look anything like the original. Here is the original code. In retrospect I have no idea how I got it to work, since it looks messy as heck: Code: <table align="center" style="position:relative; top:-15; z-index:5" border="0" width="983" height="198"> <tr><td><img style="position:absolute; top:0;" src="http://www.thesunderedguard.com/images/banner.jpg"></td></tr> </table> All my tinkering around with the new page has not been successful at all. Any help would be much appreciated! Cheers How can I, let's see how to say this. Align text to the middle of a div (up and down)... not really a center Normal: ________________________________ Text ________________________________ After: ________________________________ text ________________________________ THANKS Hey guys, I'm having trouble centering div boxes on my page, wondering if anyone can help. I have tried using {margin: 0 auto;} which works fine, but when the scrollbar appears on the page it knocks it off balance and the other content on the page becomes mis-aligned. I have also tried setting left margins to push the div to the middle, but I figured this would cause problems and wouldn't look right to people using higher than 1024x768 resolutions. Is there any other way? http://www.stevemedleyphotography.com/tempo/index.html What I am trying to do is make it so that the blue background is as it is already but the orange box is the full width of the window despite what resolution or window size the user has, and also is centered on the screen. -------BLUE--------- -------BLUE--------- -------BLUE--------- -----ORANGE------- -----ORANGE------- -------BLUE--------- -------BLUE--------- -------BLUE--------- Like that. I will be having some stuff within the orange div. I don't really know much CSS at all and am kinda guessing my way through it... poorly... Thanks for any help. Hey. I'm having issues with getting my page to center in IE7 using margin: auto; It works fine in firefox. The page is at http://jbench.co.uk:81/. The CSS is at http://jbench.co.uk:81/css/css.php . The section where i think the problem is: CSS Code: Original - CSS Code #page { width: 900px; margin: 0 auto; padding: 14px 3px; min-height: 250px; font-size: 1.2em; }
#page {
Any help's appreciated. Hi all, this is my CSS: Code: body {
font-family:arial;
font-size:14px;
background-color:#FFFFFF;
margin: 0;
padding: 0;
}
.mainbar {
position:absolute;
height:100%;
width:600px;
display:block;
background-color:#F2F2F2;
top:0px;
bottom:0px;
z-index:0;
border-top: 0px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px solid #000000;
border-left: 1px solid #000000;
}
.contact {
position:absolute;
display:block;
height:40px;
width:600px;
background-color:#FFFFFF;
top:80%;
bottom:0px;
z-index:0;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}
.logo {
position:absolute;
display:block;
height:200px;
width:600px;
background-color:#CCCCCC;
top:10%;
bottom:10%;
border:1px solid #000000;
z-index:2;
}
.logoborder {
border-top: 0px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px solid #000000;
border-left: 1px solid #000000;
}
Now how do I go about centering all of this? I have put many frustrated hours into this, and have tried everything that could have a possibility of working but have come out with nothing. Any help would be appreciated! Please, I have read other forum posts and it is not clear what to do, so treat me like i'm 5 years old!!! Thanks! Jack. I was wondering how I could center a CSS div so I would have one column going thorugh the middle. I tryed using "center" in the CSS but that didn't work and then I read some where else about floats and how they will make every go to either the left or right. How would I go about centering a Div like that? Thankyou for any help. Hello, I have tried to use the auto margin to center a div within a div, but the auto margin only seems to work on the outermost div. Is there a workaround where I can center my content inside of a nested div? Take the example code: Code:
<html>
<head>
<style type="text/css">
body {
background-color: orange;
}
#container {
width: 700px;
margin: 0 auto;
background-color: red;
}
#nested {
width: 700px;
margin: 0 auto;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="nested">
Text Here
</div>
</div>
</body>
</html>
So I want the nested div to have its content centered, so "Text Here" is in the center. im trying to center this div but im not to sure on how to do it Code: <style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
|
|||||||