|
CSS - Centering Image Inside < Div > Block
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?? Similar TutorialsMy 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! Hi guys, can you give me some tips to centering a block (<div>) of code? I would like it centered vertically and horizontally and I would also like the background of the element centered (so the whole thing). text-align doesn't work, it only centers the text, not the element. Thanks, Josh Hello, I'm customising a theme in wordpress and having a problem centering the three widgets that appear in the footer at the bottom. Nothing seems to work that I have tried. I know very little about css but understand the basic principle but can't seem to find the problem. I want the footer to be 100% the width of the page and for the three wigets to be in a single row of 3 but in the center and not off to the left. I've tried adjust the float but it just stacks them on top of each other set to none and over to the right set to right... I've inlcuded the CSS below and also the code in my footer.php page. Thanks in advance. test site is http://mtbireland.com/hkr Code: </div>
</div>
</div>
<div style="width:100%; text-align: center; margin: 0 auto;">
<div id="footer"><div id="footer-left">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 1') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
<div id="footer-middle">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 2') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 3') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
Code: #footer {
height:200px;
padding:20 0 0 0;
color:#FFFFFF;
font-size:12px;
font-weight:normal;
line-height:20px;
font-family: Tahoma,georgia,Century gothic, Arial, sans-serif;
width:100%;
float:left;
background:#392E2C;
text-align:left;
}
/* Footer Widgets */
#footerwidgets {
display: block;
width:100%;
background:#392E2C;
}
#footer-left {
width: 210px;
float: left;
margin: 15px 10px 10px 30px;
padding: 10px;
text-align:left;
}
#footer-middle {
width: 210px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
text-align:left;
}
#footer-right {
width: 210px;
float: right;
margin: 15px 10px 10px 15px;
padding: 10px;
text-align:left;
}
Ok, I know there must be a simple solution to this that I'm blanking on. The website has a background image: Code:
#background {background-image: url(x.jpg);
margin-left: auto;
margin-right: auto;
width: 1024;
height: 760;
z-index: 1;}
So it's centered and the margins auto resize. Now, I want to add a text content area over the background so that it moves with it upon resizing. What's the best way to do so? I want to create a css menu where a chunk or block is highlighted on mouse over but inside that block are individual hyperlinks that are also highlighted on mouse over. Here's the catch, I can't use any doctype tags like this one <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> because it makes the rest of my page look like junk. The top nav on this page is exactly what I want to do. http://www.smashingmagazine.com/tag/showcases/ Ok, so maybe I don't understand the display attribute quite right. What I'm doing makes sense to me, but it's not working right when displayed. I have a div that is set to display inline (so that I don't have to use floating). Since inline elements can't have height/width attributes, i have another div inside of it, with display set to block. This inner div has height and width attributes. Now, if I place another similar structure (block div inside inline div) in the code, the two outer divs /should/ (in my mind) render side-by-side with the heights and widths of their child div's. When I try it though, it displays everything as block-type. Any ideas? PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <style type="text/css"> img{ border: 0px black solid; height: 200px; } div.outerholder{ display: inline; } div.innerholder{ text-align: center; height: 200px; width: 267px; margin: 0px; padding: 0px; display: block; } div.centerme{ text-align: center; margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="centerme"> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> <div class="outerholder"> <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> <div class="outerholder"> <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> </body> </html> P.S. It also doesn't center properly in FF, but that's secondary... Hello, I know that putting a block level element (such as <p> or <div>) inside an inline element (such as <a>) is against "xhtml 1.0 strict" rules, so I'm putting a <span> (inline) within an <a> (also inline). I've made my <span> "display: block;", and it works in all browsers and validates fine, but I feel like I'm cheating the system a bit? The thing is, I need to put a margin under a piece of text without using <br /> (as when a browser forces a line break, it will use that rule and make different pieces of text look odd), but all the text is within an anchor tag, so I can't use <p> or <div>. Would appreciate any thoughts on the matter, Cheers! Hi, I have a realy strange problem that I'm hoping someone can shed some light on. I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor. <a href=""><h2>Some text</h2></a> Using firebug I saw that the html gets duplicated like so: <a href=""></a> <h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places! <a href=""></a> and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>. In the stylesheet the anchor has display:block; Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before! Thanks. I'm trying to center the <div class="menu"> inside the <div id="nav"> but I cannot figure out what to do exactly. I've tried so many different things with the text-align:center to putting it into a table and centering that... Nothing I try is making it go to the center. Will someone please assist me in getting this centered? EDIT: The way I have it currently, If I put text outside of the <div class="menu"> then that will be centered fine like I want the div. HMTL code Code:
<div id="nav">
<div class="menu">
<ul>
<li><a class="hide" href="#">Top 1</a>
<ul>
<li>Sub Top 1.1</li>
<li>Sub Top 1.2</li>
</ul>
</li>
<li><a class="hide" href="#">Top 2</a>
<ul>
<li>Sub Top 2.1</li>
<li>Sub Top 2.2</li>
</ul>
</li>
</ul>
</div>
</div>
CSS code Code:
#nav{background-color:Blue;height:35px;width:auto;text-align:center;}
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
I am trying to simulate a vertical table using divs and css, but I can't figure out how to center elements. How do I center (horizontal and vertical) these 3 boxes inside the 3 frames? Code:
<html>
<head>
<style>
.frame {
width: 200px;
height: 200px;
border: 2px solid black;
}
.box1 {
width:50px;
height:50px;
background-color: red;
}
.box2 {
width:100px;
height:100px;
background-color: yellow;
}
.box3 {
width:150px;
height:150px;
background-color: green;
}
</style>
</head>
<body>
<div>
<div class="frame">
<div class="box1">Box 1</div>
</div>
<div class="frame">
<div class="box2">Box 2</div>
</div>
<div class="frame">
<div class="box3">Box 3</div>
</div>
</div>
</body>
</html>
Hey guys, Im having a bit of a confusing problem at the moment, im trying to center my navigation menu inside my fixed width. This is how it currently looks like: Im trying to center it so it doesnt matter how many <li>'s there are it will still be centered. Here is my HTML: PHP Code: <center> <div class="main_menu"> <ul> <li> <a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li> <a href="#">Portfolio</a></li> <li> <a href="#">Portfolio</a></li> <li> <a href="#">Portfolio</a></li> </ul> </div> </center> And here is my CSS: Code: .main_menu
{
border:1px solid;
width:898px;
margin-bottom:5px;
background-color:#333333;
height:30px;
line-height:30px;
color:#000000;
position:relative;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-align: center;
}
.main_menu ul
{
position:relative;
text-align: center;
margin: 0 auto;
list-style:none;
cursor:pointer;
}
.main_menu ul li
{
list-style-position:inside;
cursor:pointer;
text-align: center;
padding:0;
margin:0;
float:left;
background:#333333;
}
.main_menu ul li a
{
cursor:pointer;
text-align: center;
color:#FFF;
display:block;
text-decoration:none;
padding:0 25px;
}
.main_menu ul li a:hover
{
cursor:pointer;
text-align: center;
background:#3ea5ea;
color:#000;
}
Hello guys, I know this is asked several time, but this case is different and can't find a working solution. I'm creating a navbar using ul lists with items as images, and want to center it. I'm using the blueprint css framework, and the list items contains images instead of text. Here's the HTML code : Code: <body> <div class="container"> <div id="header" class="span-24"> <div id="header_wrapper"> <ul> <li><img src="images/nav_03.png" /></li> <li class="selected"><a href="#"><img src="images/nav_04.png" /></a></li> <li><a href="#"><img src="images/nav_05.png" /></a></li> <li><a href="#"><img src="images/nav_06.png" /></a></li> <li><a href="#"><img src="images/nav_07.png" /></a></li> <li><img src="images/nav_08.png" /></li> </ul> </div> </div><!--End Header--> </div> </body> Here's the CSS code : Code:
#header{
padding-top:53px;
border:#F00 solid 1px
}
#header_wrapper ul {
text-align: center;
}
#header_wrapper ul li {
display: inline;
}
I tried many code configurations but can't get it to work! a live preview is available here Damn another problem good thing you guys are so helpful.... What am I doing wrong here? css Code: #footer{
position:relative;
z-index:-1;
margin-top:-50px;
background-color:#666666;
width:100%;
height:100px;
margin-left:auto;
margin-right:auto;
border-top:#000000 10px solid;
}
#footer ul{
position:absolute;
padding:0px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
#footer li{
display:inline;
padding:0px;
margin:0px;
}
#footer a{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
border-right:#FFFFFF 1px solid;
}
html Code: <div id="footer">
<ul>
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
<li><a href="#">Nav 4</a></li>
<li><a href="#">Nav 5</a></li>
<li><a href="#">Nav 6</a></li>
<li><a href="#">Nav 7</a></li>
</ul>
</div>
Just can't seem to get the list centered inside the div Thanks for taking the time to read my question. I have icons that I want to place on my nav buttons (which are background imgs) without having to make the button and the icon one picture and have to load a seperate button for each link. My problem is that I have my link text as block so that when the user hovers over anywhere in the button area, it's active, not just over the text. What is happening is the icons are appearing below my button, not to the right of the text in the button. Not sure how to get around this, or if I even can. Thanks agian for your help Brad Should look like: |------------------------| | Link Txt {img here} | |_____________________| Currently looks like: |------------------------| | Link Txt | |_____________________| {img shows up here} HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home Notes</title> <link rel="stylesheet" type="text/css" href="home.css" media="screen" /> </head> <body> <div class="header"> <h1>Home Notes</h1> </div> <p class="instructions">Select an option to start</p> <ul> <li class="mainmenu"><a href="grocery.htm">Grocery</a><img class"menuicon" src="images/shopping_cart_basket_Small.png" /></li> <li class="mainmenu"><a href="recipe.htm">Recipe</a><img class"menuicon" src="images/notes_edit_Small.png" /></li> <li class="mainmenu"><a href="messages.htm">Messages</a><img class"menuicon" src="images/Post-It_Small.png" /></li> <li class="mainmenu"><a href="calendar.htm">Calendar</a><img class"menuicon" src="images/Calendar_Small.png" /></li> <li class="mainmenu"><a href="phonebook.htm">Phone Book</a><img class"menuicon" src="images/cellphone_128_Small.png" /></li> <li class="mainmenu"><a href="email.htm">Check E-mail </a><img class"menuicon" src="images/mail_Small1.png" /></li> </ul> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home Notes</title> <link rel="stylesheet" type="text/css" href="home.css" media="screen" /> </head> <body> <div class="header"> <h1>Home Notes</h1> </div> <p class="instructions">Select an option to start</p> <ul> <li class="mainmenu"><a href="grocery.htm">Grocery</a><img class"menuicon" src="images/shopping_cart_basket_Small.png" /></li> <li class="mainmenu"><a href="recipe.htm">Recipe</a><img class"menuicon" src="images/notes_edit_Small.png" /></li> <li class="mainmenu"><a href="messages.htm">Messages</a><img class"menuicon" src="images/Post-It_Small.png" /></li> <li class="mainmenu"><a href="calendar.htm">Calendar</a><img class"menuicon" src="images/Calendar_Small.png" /></li> <li class="mainmenu"><a href="phonebook.htm">Phone Book</a><img class"menuicon" src="images/cellphone_128_Small.png" /></li> <li class="mainmenu"><a href="email.htm">Check E-mail </a><img class"menuicon" src="images/mail_Small1.png" /></li> </ul> </body> </html> CSS: Code: @charset "utf-8";
/* CSS Document */
Body {
color: #000000;
background-color: #666666;
font-size: 18px;
padding: 0px;
margin: 0px;
}
.header {
background-color: #0066FF;
width: auto;
height: 70px;
border-bottom: 4px #333333 solid;
padding: 0px;
margin: 0px;
}
.header h1 {
padding: 0px 0px 0px 10px;
line-height: 60px;
margin: 0px;
}
.instructions {
padding-left: 10px;
text-decoration: underline;
font-weight: bold;
}
li.menuicon {
float: right;
}
li.mainmenu{
list-style: none;
line-height: 68px;
background-image: url(images/Button1.png);
background-repeat: no-repeat;
padding-left: 10px;
margin: 4px 0px;
width: 183px;
}
li.mainmenu a:link{
color: #000000;
text-decoration: none;
display: block;
}
li.mainmenu a:visited{
color: #000000;
text-decoration: none;
display: block;
}
li.mainmenu a:hover{
text-decoration: overline underline;
display: block;
}
li.mainmenu a:active{
display: block;
}
The year is 2009, and surely there is a way to such a simple thing as displaying photos of unknown size in the H-center of a Div--without running off the screen. Oh wait, there isn't. The problem: Given unknown picture size, 1) if I don't specify absolute positioning (or fixed), I can center it but then it floats to the top of the parent which looks silly. 2) If I do specify absolute (or fixed) positioning, I can't center it. Please prove me wrong. I just want a simple slide-show page without telling folks what to set their resolution at, or how big the pictures need to be. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. I 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?? 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>
|
|||||||