|
CSS - Vertical Middle
hi
is there a way to get a div to be in the vertical middle of the screen. i tried : margin-top: auto; margin-bottom: auto; but it doesn't work. thanks Similar TutorialsI've got an image that is 75px high. Right beside it, I have a H1. I want to vertically align the H1 in the middle of the image. Vertical align doesn't work, and for some reason, setting the line height to the height of the image doesn't work either. Thanks for taking the time to read my question. I have an image that I want to place in the middle of a contaier. I have <center></center> around the <img /> tag, but I can't get it to center vertically with the css below. What am I doing wrong? Thanks, Brad CSS: Code: img.contentimg {
vertical-align: middle;
}
HTML: Code: <div class="textbox1"><center><img class="contentimg" src="images/house1.jpg" /></center></div> hmmm, i can't make this work...the text goes to the top, not the middle... #mrtop { height: 33px; width: auto; vertical-align: middle; } both "title" and "subtitle" are just text attributes, nothing more... <div id="mrtop"><span class="title"><? echo $a ?></span> <span class="subtitle"><? echo $q ?></span></div> i would use padding at the top and bottom but i'm concerned about text zooming...if people were to use text zoom and it needed more space for the "mrtop" div it would screw up some other stuff on the page (so i need to make "middle" work if it's possible)... thanks for any advice...v Hi there, I'm trying to display paragraph with a table embedded in there inline. I hope the table can behave like a big letter in the paragraph, with the line aligned in the center of the table. For example, if I want to make "1/2" to a vertical "1 <hr/> 2", I would put it in a table and change the "display" property as follows: Code: <p> This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. I HAVE <table style="display:inline;vertical-align:middle"> <tr> <td> 1 <hr /> 2 </td> </tr> </table> PIZZA. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This works perfectly for me on IE, but on Firefox only the "inline" property works, and the "vertical-align" property doesn't (i.e., the table and the line text are aligned at the bottom still). Did I do something wrong? Or is this a Firefox bug? Thanks I have an image and to the right of it I have text. I want the text to be aligned veritcally to the middle of the image. I can do the following and it works: Code:
.icon {vertical-align: middle;}
<a href="index.php"><img src="images/icon.png" class="icon" border="0" /></a>
Header Goes Here
However, if I wrap H1 tags around "Header Goes Here" the text drops below the image. Any ideas on how to use header tags and have it aligned? I know I could make the icon as a background with H1 but I want it to be clickable. Is there any way to make it so the H1 Normally when I want to vertically align some text to the middle of a div I use line-height: 40px; and vertical-align: middle; However that only seems to work on single lines of text because with multiple lines of text the line height of each line means there is a large gap between the text rather than centreing the whole lot vertically. How do I get around this? I thought something like the following would work but it doesn't. <div style="line-height: 60px; vertical-align: middle;"> <span style="line-height: normal;">line1<br />line 2</span></div> Hi everyone! i have this mockup in fireworks for my personal site.. problem is... i cant put it together the way i like it using CSS here is my mockup and the slices ive made... http://www[dot]phpugph[dot]com/talk/index.php?action=dlattach;topic=8005.0;attach=1720;image im sorry for the link... i cant seem to post a proper one do u guys know how i should go about it? the middle column should be fixed width but the right and left column should be fluid thanx 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. I have this code: Code:
<html>
<head>
<style type="text/css">
body {
font-family: arial, helvetica, serif;
font-size: 100%;
background: white;
padding: 2em;
margin: 0;
}
#content {
width: 34em;
background-color: #ffffff;
padding: 1em 0;
border: 6px double #6DA9CA;
margin: auto;
voice-family: "\"}\"";
voice-family:inherit;
width: 32em;
}
html>body #content {
width: 32em;
}
a {
text-decoration: none;
}
a:link {
color: #080;
}
a:visited {
color: #790;
}
a:active {
color: red;
}
a:hover {
text-decoration: underline;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 10em;
text-align: left;
cursor: default;
background-color: white;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
padding: 0.5em 0 1em 0;
border: solid 1px #6DA9CA;
}
#submenu li ul {
border: solid 1px #6DA9CA;
}
li>ul {
top: auto;
left: auto;
}
#nav a {
color: black;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: normal;
color: #060;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #6DA9CA;
border-width: 0 5px;
}
li:hover ul, li.over ul{ display: block; }
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Guiding Principles</a></li>
<li>Background & Qualifications</a>
<ul>
<li><a href="">Biography</a></li>
<li><a href="">Dispute Resolution</a></li>
</ul>
</li>
<li>Developments
<ul>
<li><a href="">International</a></li>
<li><a href="">Specialty & Agrichemical News & Regulations</a></li>
<li><a href="">Archive</a></li>
</ul>
</li>
<li><a href="">Other Resources</a></li>
</ul>
</body>
</html>
And I like it - but I have one problem - I want there to be lines between each of the <li>s in the submenus - meaning between Biography and Dispute Resolution I want a line - I know there is no border-middle value - so how do I do this? how can i get a div in the middle of the y-axis of the browser window? demo: http://www.soundwebdev.com/hh/ As you will see, the middle column starts its background image too low. The left and right put it in the correct place, but the center is about 12px too low. All the styles are in the source. Any help is GREATLY appreciated! hi to all I have a round boxes using div, Inside this div there is an picture image which doesn't have a fix size fot both height and with. I want to put on the left and right side of another image such as left_anim.gif and right_anim.gif . But I want to center vertically this gif. If the picture image have a fix size I can center it vertically but it will varies depend on the size of the pictures, How can I achive this. any suggestions would greatly appreciated thanks in advance Tirso here is the sample link http://www.tirso.webberzsoft.com/mypicturecards_individual_others.php here is 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=iso-8859-1" />
<title>CSS Example - How to create rounded corner boxes using CSS</title>
<link type="text/css" rel="stylesheet" href="css/css.css" />
</head>
<body>
<div id="formdiv">
<div id="picturecards_individual">
<div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr">
<div id="buttons">
<div class="cont">
<div class="frame" id="frameimage">
<div style="float:left; vertical-align: middle"><img src="images/left_anim.gif" /></div><img src="picturecards/individual/DSCF0011.JPG"/></div>
</div>
</div>
<div style="clear:both"></div>
</div></div></div></div></div></div></div></div> <!--end of rounded box-->
</div>
</div>
</body>
</html>
Ok guys, ive looked all over to try to find a code that will work, nothing so far. So here it is css Code: Original - css Code * { margin: 0px; padding: 0px; } html { width: 100%; height: 100%; } body { height: auto !important; height: 100%; min-height: 100%; background-color: #efead0; margin: 0px; padding: 0px; position: relative; } .clear { clear: both; } /* Start Site - Container sets the width for the whole page Divs: - Top is the top image - Top li is for the menus - Content is for the actual site - Footer is for the bottom image */ #div_container { margin: 0px auto; width: 800px; height: 100%; } #div_top { background-image: url(images/body_top.png); background-repeat: no-repeat; width: 800px; height: 100px; } #div_banner { text-align: center; margin-left: auto; margin-right: auto; } #div_top li { position: absolute; top: 50px; list-style-type: none; } #div_content { background-image: url(images/body_main.png); background-repeat: repeat-y; width: 800px; } #div_footer { position: absolute; bottom: 0; background-image: url(images/body_bottom.png); background-repeat: no-repeat; width: 800px; height: 100px; }
and the html html Code: Original - html Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" URLWASBLOCKED> <html xmlns=URLWASBLOCKED> <head> <title>{L_TITLE}</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="site.css" /> </head> <body> <div id="div_container"> <div id="div_top"> </div> <div id="div_content"> <div id="div_banner"> <img src="images/banner3.png" width="755px" height="136px"> </div> </div> <div id="div_footer"> </div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" URLWASBLOCKED>
<html xmlns=URLWASBLOCKED>
<head>
<title>{L_TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="site.css" />
</head>
<body>
<div id="div_container">
<div id="div_top">
</div>
<div id="div_content">
<div id="div_banner">
<img src="images/banner3.png" width="755px" height="136px">
</div>
</div>
<div id="div_footer">
</div>
</div>
</body>
</html>
What i am trying to do is have div_content take 100% of the page. having the top div stuck to the top, and the footer stuck to the bottom. I managed to do the bottom but i cant seem to make it so that the middle div takes 100% of the page. Im using Linux, so i am using firefox and chrome for testing but i also need it to be IE compatible. Help? Thanks. I'm working on a new page at http://www.plumeriawebdesign.com/webdevgirl/ and am having problems aligning the middle div column. In IE it shows approximately 25px below the dark blue date bar while it shows correctly in FF. I'm also having problems with it extending further than the 100% wrapper div. Here is my HTML Code:
<body>
<div id="wrapper">
<div id="top" align="center"><img src="images/webdev_02.gif" alt="Exceptional web design made affordable"/></div>
<div id="nav">
<?php
$today = date("D M d Y");
echo "$today\n";
?>
</div>
<div id="left">left column</div>
<div id="right">right column</div>
<div id="middle">middle column</div>
</div>
</body>
CSS is he Code:
/* CSS Document */
html {
height: 100%;
}
body {
margin: 0px 0px 0px 0px;
background-color:#333;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
position: relative;
min-width: 600px;
width: 100%;
height: 100%;
color: #333;
}
#wrapper {
width: 100%;
height: 100%;
}
html>body #wrapper {
height: 100%;
}
#left {
float: left;
left:0px;
top:113px;
width:12%;
background-color: #a2cde3;
border-right: 2px solid #333;
padding: 5px 5px;
}
#middle {
top: 0px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 12%;
margin-right:12%;
padding: 5px 5px;
height: 100%;
min-width: 360px;
width: 76%;
background-color: #626262;
color: #000;
}
html>body #middle {
margin-left: 12%;
margin-right:12%;
}
#right {
float: right;
top: 0;
width:12%;
background-color: #a2cde3;
border-left: 2px solid #333;
padding: 5px 5px;
}
#top {
min-width: 600px;
width: 100%;
height: 100px;
background-color: #FFF;
color: #FFF;
voice-family: "\"}\"";
voice-family: inherit;
}
html>body #top {
height:100px;
}
#nav {
top: 100px;
left: 0;
min-width: 600px;
width: 100%;
height: 12px;
background-color: #005698;
color: #e4e4e4;
vertical-align: bottom;
text-align:left;
text-indent: 5px;
clear: both;
}
Hello. I have no idea how to fix my problem, and I am hoping someone would be kind enough to help me. I have set up my template to have a wrapper div with a top, middle, and bottom div inside. What I need to do is have the footer (bottom div called (wrapper_bottom) move down when the content in the middle div (wrapper_middle) has more content added. Currently, when content is added to the middle div (wrapper_middle), it pushes the bottom div content out of the way. Maybe I have the divs set up wrong or maybe have them listed in the html file incorrectly? I have uploaded a zip file of my files he www (*) dpegues (*) com (slash) site_help (*) zip Also, I have posted a live version of it at: www (*) dpegues (*) com (slash) site_help It contains my site images, the template in the folder called Templates, and the css file. And one more thing if everyone doesn't mind - how do I keep the bottom buttons attached to the bottom of the footer bar? I am learning CSS right now, and unfortunately have to teach myself. I think I have learned a lot though in the few days I have been doing it!!! Thank you everyone. Ok, you can do this with a table by setting its height and width to 100% and then valigning to middle and centering. However is there a way to do it using CSS? Hello, 1st post on this forum. How can I create a three column layout with the left and right div-containers sticking to the left and right sides and then make the middle container stay centered? I would post links to the pages but this forum will not let me. Thanks for the help hello everyone, I've been reading this forum for ages, but I thought i'd finally post. I have a problem with my site forexpm.com The ads are supposed to be on the right hand side, but some people say that in firefox they are in the middle, covering the text. I know it's something to do with css, but I can't work out what it is. Can anyone please help? Thanks muchly. I have been looking for this all over the place but cant find the right solution. I want a div aligned like it's on this website. Code: http://www.captaincrawl.com/ 1. It's aligned in the center/middle of the screen 2. It's relative so it moves according to the window size 3. It should work on major browsers such as IE Can anyone help me please? |
|||||||