|
CSS - Vertical Centering In A Div?
I have a div that is 60px high. I want text to be centered vertically in that box. I know it is easy to do with tables, but how do you do it with css and divs? i tried using vertical-align, but that didn't seem to work. any ideas?
Similar TutorialsHow can I get the text to display in the middle of these boxes (vertically)? I would think vertical-align: middle would do it, but it doesn't work. Thanks in advance for any help! LauraS. Here's the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.buttonscontainer-top {
width: 142px;
height: 36px;
}
.buttons-top a {
color: #777777;
background-color: #DDDDDD;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
display: block;
height: 36px;
text-align: center;
vertical-align: middle;
}
.buttons-top a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
}
</style>
</head>
<body>
<table width="710" height="36">
<tr>
<td class="buttons-top a"><a href="index.html">home</a></td>
<td class="buttons-top a"><a href="about.html">about</a></td>
<td class="buttons-top a"><a href="our_work.html">our work</a></td>
<td class="buttons-top a"><a href="clients.html">clients</a></td>
<td class="buttons-top a"><a href="contact.html">contact</a></td>
</tr>
</table>
</body>
</html>
Hi guys. I've got a single element (image) that I want to vertically center in an otherwise blank page. Can anyone tell me how I can do this, that works with all browsers, and doesn't requite tables? http://www.waxpad.com/articles/vcexample.html I found this article on it, but joy of joys, it doesn't work in Safari on a mac! Can someone please explain this to me, because I'm apparently missing something. I have a div that I am using as an overlay to my site. I want this div to be 50% wide, and 50% high, and be properly centered on the screen. I was able to get horizontal centering working almost perfectly, but when it comes to vertical centering- things just don't make sense. To center, I'm setting top & left to 50% and then using margin-top and margin-left with negative values to compensate. What I assume should work (and seems to work with horizontal centering) is that if I set the margin-left to -25%, the leftmost side of my div should end up half-way between the beginning of the browser window and the center of the browser window. But if I set margin-top to -25%, by the same logic, it should move the topmost side of the div up to between the top of the browser view area and the center. But that doesn't seem to happen- at least in FF3: Code:
<html>
<head>
<style>
div#dialog
{
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
margin-top: -50%;
margin-left: -25%;
background-color: #FFFFFF;
border-top: #FF0000 3px solid;
border-left: #FF0000 3px solid;
border-right: #FF0000 3px solid;
border-bottom: #FF0000 3px solid;
z-index: 202;
}
</style>
</head>
<body>
<div id="dialog"></div>
</body>
</html>
Instead what happens is the top of my div ends up at the very top of the viewing area of the browser- and actually a little bit ABOVE it (outside of the view area). WHY!? If I set the margin-top to -50%, which I would expect to place the topmost edge of the div at the very top of the browser viewing area, the div disappears entirely! Yet if I set margin-left to -50%, it appears along the left side of the browser window where I'd expect it to be. Why might this be happening? Again, obviously I'm missing something. Can someone please explain? Is there another/better way of doing this? Thanks, - skubik Hello everyone, I'm trying to center a fixed size div both vertically and horizontally. Everything would work, but, as usual ... IE doesn't know how to handle it properly. Let me explain: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="ALL, INDEX, FOLLOW" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Title</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.d1 {
width: 1px;
height: 1px;
position: absolute;
left: 50%;
top: 50%;
}
.d2 {
width: 700px;
height: 300px;
background-color: black;
position: relative;
left: -350px;
top: -150px;
}
</style>
</head>
<body>
<div class="d1"><div class="d2"></div></div>
</body>
</html>
If you copy and paste it to explorer, everything might even look good. But if you resize the browser to be just a little bit larger than the black div, you'll notice that both vertical and horizontal scrollbars appear. Why is this happening? How do i prevent IE from acting stupid? I've tested with ie6 and ie7. Hi, I would like to center a div inside another div (both vertical and horizontal) in such a way that the inner div would move/reside depending on the content inside it. In other words I have two divs; outerDiv and innerDiv. InnerDiv will have more html inside it and I would like innerDiv to always be in the middle of outerDiv regardless of its content. I did some research on the internet and I managed to achieve the following: 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>
<style type="text/css">
div#mbBackground{
display:block;
position: fixed;
top: 0px;
left: 0px;
width: 100% !important;
height: 100% !important;
margin: 0 auto;
z-index: 2;
background-color: #c00;
}
div#mbBackground div#mbWindow{
position:fixed;
top: 40%;
left: 40%;
z-index: 2;
margin: 0 auto !important;
margin-left: 40%;
margin-top: 40%;
height: 200px;
width: 200px;
background-color: #fff;
color: #000000;
}
</style>
</head>
<body>
<!-- start: message box -->
<div id="mbBackground">
<div id="mbWindow">
Please Wait
</div>
</div>
<!-- end: message box -->
</body>
</html>
However with the above code, innerDiv does not re-position it-self correctly based on its content. Is what I need possible? Regards, Sim085 So here's the page I'm working on: http://johannkwan.com/about.html The HTML side is simple: Code: <div id="horizon"> <div id="wrapper"> <div id="about_content">About</div> <a href="http://www.johannkwan.com" id="back">Back</a> </div> </div> The CSS side is just a horizon bar with the wrapper in the middle, the top margin offset to half the wrapper so it'll center properly. Code: #horizon {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
margin-top: -300px;
text-align: center;
min-width: 800px;
}
#wrapper {
position: relative;
text-align: left;
width: 800px;
height: 600px;
margin: 0px auto;
}
Here's my problem. If you're looking at the page on anything under 800x600 (or if you resize your browser to under 600) the top bit cuts off. You can't scroll up past part-way up the image. But it's not 300px of cut off... it's some sort of distance I haven't defined, so I'm not entirely sure where I'm going wrong. Is there a better way to vertically center my content? Or is there just something wrong in my stylesheet I'm not seeing? Any help would be appreciated. Thanks! Hello, Thank you for reading my post This is what I try to create. A Vertical Navigator column with images, without knowing their size, as links and javascript actions. The images should be Horizontally centered. I want to set the width of the div 'navBar' dynamically so that the images inside the 'navElement's grows or shrink but stays in center. The images could be between 55 - 90 pixels width. And I want to have them grow or shrink between 40 - 80 px width. What I already got : The links and javascript actions are working. Also have a column working where the images are centered with a known size, but not working with images without knowing the size. I did try and search for several hours, but couldn't find a good solution. Mainly my question would be, how I can shrink or grow an image without knowing his size. Basicly my html code is Code: <div id="navBar"> <div class="navElement" id="nav1"> <img class="navImg" src="images/home.gif" /> </div> <div class="navElement" id="navN"> <img class="navImg" src="images/notHome.gif" /> </div> </div> my latest css for unknown image size Code: #navBar { /* main page navigation container */
height: 460px;
width: 70px; /* 1. this will be dynamically set */
left: 100px;
top: 151px;
position: absolute;
visibility: visible;
}
.navImg {
height: auto;
width: auto;
/* height: 60px;*/
/*width: inherit;*/
position: relative;
top:0px;
margin:0 auto;
}
#navElement1 {
position: relative;
width: auto;
height: 70Px;
top:0px;
margin:0 3px;
visibility: visible; }
With javascript I add a onclick event handler on each navImg wich trigger the action. This works to. Please, Is someone willing to help with pointers. Thanks in Advance SC Hello, i'm have a recurring problem when programming websites and it is the vertical spacing added by IE6 between two images. Here is an example template I am working on. brycecre8iv.com The lines beneath the buttons are getting an extra 10px padding at the top in IE6. Appears in order on FF2. Also for some reason the centering is not working with the main container in IE. this usually works perhaps someone can spot my errors. Thanks for any help. webg my navbar is a <ul> and i jsut added image icons. i have two problems, the placement and the vertical centering. placement: well, i guess its best to show you the code and what i had to do to get it in place. i used position:relative and then changed the bottom, but why is it so obscure??? Code: #navbar {
text-align:right;
background-image: url('images/menu_new.GIF');
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
padding-right: 8px;
margin-top:-12;
height:31;
}
#navbar ul {
margin-right: -0.3em;
height:31px;
position:relative;
bottom:-2px;
}
#navbar ul li {
display: inline;
list-style-type:none;
margin-left: 0.3em;
margin-right: 0.3em;
position:relative;
vertical-align:middle;
}
#navbar ul li a {
padding-top:11px;
color:#495B20;
background-color:#BAD36B;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
#navbar ul li a:hover {
background-color:#495B20;
color:#BAD36B;
border-left: 2px solid #000;
border-top: 2px solid #000;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#navbar ul li div {
position:relative;
}
#navbar ul li img {
border:none;
width:24px;
height:24px;
padding-right:4px;
margin: 0;
}
vertical centering: i have looked at the tutorial, but i need serious help. i'm not trying it again, im missing something. can someone please show me how do do this? i want to center it like this... ....................................... . . . texttexttexttexttext. .image texttexttexttexttext. .----- texttexttexttexttext. . . ....................................... so both the image and text are centered but theyre floated left. actually, maybe they dont need to be floated cuz its just a word or two. look at the header for the best desc. i have tried this with my game box, and i'm clued out. i really hope sum1 can help me with this. http://www.viportals.com/ EDIT: DID IT ON MY OWN!!! THATS A FIRST!!! Code: #navbar {
text-align:center;
background-image: url('images/menu_new.GIF');
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
margin-top:-15px;
height:31px;
line-height:31px;
margin-left:0;
margin-right:0;
}
#navbar ul li {
display: inline;
list-style-type:none;
}
#navbar ul li a {
padding-left: 0.3em;
padding-right: 0.3em;
padding-top: 4px;
padding-bottom: 4px;
color:#495B20;
background-color:#BAD36B;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
#navbar ul li a:hover {
background-color:#495B20;
color:#BAD36B;
border-left: 2px solid #000;
border-top: 2px solid #000;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#navbar ul li img {
border:none;
width:24px;
height:24px;
padding-right:4px;
vertical-align: middle;
}
now i have one QUESTION: how do i get all the buttons to align center?????????? they all stay to the right oh, and not a huge deal, but the text is a couple pixels down so it brings the image down too. how can i make the text in the vertical middle? the line-height thing only worked so well. Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. /*Left Links*/ #leftcol{ float: left; display: block; width: 200px; /*Width of left column*/ } ul#leftcol{ list-style-type: none; padding: 0.5em 0 1em 0; margin: 0; } li#leftcol{ margin: 0; padding: 0; } #leftcol a, #leftcol a:link, #nav a:visited { float: left; display: block; position:relative; width: 165px; height: 1%; padding: 8px 5px 8px 30px; margin: 0; font: normal 11px Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; text-decoration:none; background-image:url(images/sidelinks_back.jpg); border-bottom: 1px solid #FFFFFF; } #leftcol a:hover { background-position: 0 -45px; color: #0C0F1B; } #leftcol img { border-bottom: 1px solid #FFFFFF; } <!--LEFT COLUMN --> <ul id="leftcol" ><li><img src="images/sidelinks_top.jpg" alt="Our Services" width="200" height="40" border="0" /></li> <li><a href="**">Collision Repair</a></li> <li><a href="**" >Heavy Frame Repairs</a></li> <li><a href="**">Truck Body Repairs</a></li> <li><a href="**" >Sprinter Repair Specialists</a></li> <li><a href="**">Commercial Van Repairs</a></li> <li><a href="**">Painting & Decaling</a></li> <li><a href="**">Custom Truck Body Services</a></li> <li><a href="**">Morgan Body Parts & Service</a></li> <li><img src="images/sidelinks_btm.gif" alt=" " width="200" height="10" border="0" /></li ></ul> 2 problems: 1) In IE and Firefox: gap between <img> and <li> 2) In IE6, a gap appears between all my <li>tags What to do? Do I have to put my <ul> in a <div> and keep my <img> out of the <ul>? I have an image 425px x 260px which is floated left of an unordered list. The unordered list, of course, is at the same height as the top edge of the image. Any way to vertically position the ul so it is vertically centered to the image? I'm sure this is some basic thing that's just slipped my mind. http://www.onlineeditions.com/opportunityhouse/ As you can see, it's rendered differently between FF and IE: the content column on the right has a few nested divs to hold background images, but on FF (And Safari) the "right" div seems to have slipped down and to the left a few pixels. Code and css is all valid, per w3c. If someone can help me find what's gone wrong here, I'd be most thankful. Hi, I have navigation links at the top of a blog in a header file, and cannot get them to align vertically for both firefox and IE. I've tried everything I can think of (using extra <br>, <p>, vertical-align: middle, changing margins, changing padding, etc) but cannot find a solution that aligns them vertically in both browsers. Any help is appreciated. Here is the code, which works in firefox: Code: <body> <!-- page header --> <div id="header" "border: 0px solid; margin:0 auto; "> <a href="http://www.website.com/blog/"><IMG SRC="http://www.website.com/images/logo.png" BORDER=0 width="435" height="92" ALT="logo" align="left"></a> </div> <div style="clear: both; margin:0 auto; "></div> <div style="background-image: url(http://www.website.com/images/sidebar_center2.jpg); border: #333333 2px solid; width: 900px; height: 60px; padding: 6px; margin: 0px auto; font-size: 17px; text-align: center; "> <p><font face="calibri,verdana" color="#ffffff"> <a href="http://www.website.com/"><font color="#ffffff">Home</font></a> | <a href="http://www.website.com/tips-1.html"><font color="#ffffff">ilnk 1</font></a> | <a href="http://www.website.com/tips-2.html"><font color="#ffffff">link 2</font></a> | <a href="http://www.website.com/tips-3.html"><font color="#ffffff">link 3</font></a> | <a href="http://www.website.com/tips-4.html"><font color="#ffffff">link 4</font></a> | </font></p> </div> <!-- begin wrapper divs --> <div id="content"> PHP Code: echo "<div class=\"tbody2\">"; echo "<div class=\"client\">Client<div class=\"clientname\">Client Name</div></div>"; echo "</div>"; Using the above code it displays Client on top of Client Name. How do I make Client name appear to the right of Client using only css? what is the tag for writing vertical in CSS? How can i make #mydiv DIV (the main layout div), be vertically aligned to middle? http://www.dinal.ru/new/max/index2.htm I've read a lot of docs about vertical alignment in internet, but I haven't found a good cross-browser solution, which doesnt't destroy my current layout. Thank you in advance Artashes Ok...I am dabbling with CSS and I was wondering if there was anyway to specify your text to run bottom to top instead of left to right in a table cell. Anyone know if it can be done? Hey guys, I am trying to create a vertical progress bar using CSS. I am using width/height of the image in % to set the value of the progress bar. I want my vertical progress bar to start at the bottom but CSS set up my height starting point at the top. My problem in image: Is there anyway to set the height starting point at the bottom? Thanks for your time! J0kerz Hi I want to know if it is possible to vertical align the text in these div tags and how it's done. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
#1 {width:15%}
#2 {width:20%}
#3 {width:25%}
#4 {width:20%}
#5 {width:20%}
#1,#2,#3,#4,#5 {
float:left;
overflow:hidden;
display:inline-block;
height:128px;
text-align:center;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div id="1"><a href="#"><img name="" src="" width="100" height="125" alt="" /></a></div>
<div id="2"><a href="#">fffffffffffggfgf fg gd</a></div>
<div id="3"><a href="#"> dfg dfg dg d</a></div>
<div id="4"><a href="#"> dgd gd d</a></div>
<div id="5"><a href="#"> gdf gdg ddg</a></div>
</body>
</html>
Greets, dabomb_gent |
|||||||