Is there a way to valign a div tage like the way valign works with td (with CSS that is)? For example: I'll have a div tag with the height of 100px. Now I want to align everything to the middle of the div just like if you valign'ed a td to middle. Thanks
--------------------
| |
| |
| |
| |
|valign=middle |
| |
| |
| |
| |
--------------------See <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align.Tried">http://www.w3.org/TR/REC-CSS2/visudet.h ... lign.Tried</a><!-- m --> the vertical-align, doesn't work. Ex:
<div style="height:100px;vertical-align:middle;border:1px solid #CCCCCC">abc</div>
Returns:
-----------------...
|abc
|
|
|
|
|
-----------------...It has to be the element inside the parent that is vertically aligned so your text needs to be in another element inside the div.
<div style="height:100px;border:1px solid #CCCCCC">
<p style="vertical-align: middle">abc</p>
</div>
I think that works.
MNSTry setting the line-height, rather then the height of your container element:
<div style="line-height:100px; border: 1px solid #eeeeee;">
<p>Testing</p>
</div>MNS - That doesn't work either for some reason. Any other ideas?
pyro - Good suggestion but I need it to be able to grow. So when I add more lines it grows from the middle out.
Thanks,
RyanThis works. I tested it.
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>
Untitled
</title>
</head>
<body>
<div style="postion: relative; border:1px solid #CCCCCC;">
<p style="vertical-align: middle;">
abc
</p>
</div>
</body>
</html>
HTH
MNSMNS - Closer, that does work but when I add the height to it the text aligns to the top again. I was looking into the position property but don't know much about it.
I've also been searching the Web and found a few things. At the bottom is what vertical-align applies to: <!-- m --><a class="postlink" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/verticalalign.asp">http://msdn.microsoft.com/library/defau ... lalign.asp</a><!-- m --> Also found this on the expert-exchange: <!-- m --><a class="postlink" href="http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_20658277.html">http://www.experts-exchange.com/Web/Web ... 58277.html</a><!-- m -->
Thanks,
RyanDon't add the height to it. Use either &npsp or <br> to make it the size you need.
Why do you need it to be 100px high?
Got a link to your page so I can see it in "context"? Or post the whole code for the page??
MNSWell, in this situation I'm trying to make a navigation bar. Ex:
--------------------------------------------------------------
| | Test | Test | |
| Link 1 | Link | Link | Link 4 |
| | 2 | 3 | |
--------------------------------------------------------------
The main thing is that everything is centered and valign'd to the middle (like in a table). The bar is also a set height, 30px. What I'm also concerned about is that when the text gets to long and wraps to the next line that it stays valign'd to the middle. I'm trying to convert my layout from tables to divs and whatnot. This was a row with seperate cells. I'll also be needing vertical alignment for another spot to, bottom in that case. Thanks for your help MNS!
RyanThere is a much easier way to make a navbar in CSS. Just use a <ul> set to display: inline.
If you want to use where we were just add text-align: center and it will kepp the text centered to.
Take a look at the menu at my site. If you are using anything but IE to lok at it the menu folds out and it is just a <ul> with CSS styles.
Check these links:
<!-- m --><a class="postlink" href="http://www.sovavsiti.cz/css/horizontal_menu.html">http://www.sovavsiti.cz/css/horizontal_menu.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/edge/menus/demo.html">http://www.meyerweb.com/eric/css/edge/menus/demo.html</a><!-- m -->
MNS
--------------------
| |
| |
| |
| |
|valign=middle |
| |
| |
| |
| |
--------------------See <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align.Tried">http://www.w3.org/TR/REC-CSS2/visudet.h ... lign.Tried</a><!-- m --> the vertical-align, doesn't work. Ex:
<div style="height:100px;vertical-align:middle;border:1px solid #CCCCCC">abc</div>
Returns:
-----------------...
|abc
|
|
|
|
|
-----------------...It has to be the element inside the parent that is vertically aligned so your text needs to be in another element inside the div.
<div style="height:100px;border:1px solid #CCCCCC">
<p style="vertical-align: middle">abc</p>
</div>
I think that works.
MNSTry setting the line-height, rather then the height of your container element:
<div style="line-height:100px; border: 1px solid #eeeeee;">
<p>Testing</p>
</div>MNS - That doesn't work either for some reason. Any other ideas?
pyro - Good suggestion but I need it to be able to grow. So when I add more lines it grows from the middle out.
Thanks,
RyanThis works. I tested it.
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>
Untitled
</title>
</head>
<body>
<div style="postion: relative; border:1px solid #CCCCCC;">
<p style="vertical-align: middle;">
abc
</p>
</div>
</body>
</html>
HTH
MNSMNS - Closer, that does work but when I add the height to it the text aligns to the top again. I was looking into the position property but don't know much about it.
I've also been searching the Web and found a few things. At the bottom is what vertical-align applies to: <!-- m --><a class="postlink" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/verticalalign.asp">http://msdn.microsoft.com/library/defau ... lalign.asp</a><!-- m --> Also found this on the expert-exchange: <!-- m --><a class="postlink" href="http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_20658277.html">http://www.experts-exchange.com/Web/Web ... 58277.html</a><!-- m -->
Thanks,
RyanDon't add the height to it. Use either &npsp or <br> to make it the size you need.
Why do you need it to be 100px high?
Got a link to your page so I can see it in "context"? Or post the whole code for the page??
MNSWell, in this situation I'm trying to make a navigation bar. Ex:
--------------------------------------------------------------
| | Test | Test | |
| Link 1 | Link | Link | Link 4 |
| | 2 | 3 | |
--------------------------------------------------------------
The main thing is that everything is centered and valign'd to the middle (like in a table). The bar is also a set height, 30px. What I'm also concerned about is that when the text gets to long and wraps to the next line that it stays valign'd to the middle. I'm trying to convert my layout from tables to divs and whatnot. This was a row with seperate cells. I'll also be needing vertical alignment for another spot to, bottom in that case. Thanks for your help MNS!
RyanThere is a much easier way to make a navbar in CSS. Just use a <ul> set to display: inline.
If you want to use where we were just add text-align: center and it will kepp the text centered to.
Take a look at the menu at my site. If you are using anything but IE to lok at it the menu folds out and it is just a <ul> with CSS styles.
Check these links:
<!-- m --><a class="postlink" href="http://www.sovavsiti.cz/css/horizontal_menu.html">http://www.sovavsiti.cz/css/horizontal_menu.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/edge/menus/demo.html">http://www.meyerweb.com/eric/css/edge/menus/demo.html</a><!-- m -->
MNS