Hi,
I am having a small problem with the verticle align tag
I have this code: -
/* CSS CODE */
#search {
height:16px;
text-align:right;
vertical-align:middle;
}
.input {
font-family:Verdana;
font-size:10px;
font-weight:100;
color:#000000;
text-align:right;
border:1px solid #339933;
width:145px;
vertical-align:middle;
}
/* HTML CODE */
<div id="search">
<input name="search" type="text" value="Search this site..." class="input">
<input name="" type="image" src=http://www.webdeveloper.com/forum/archive/index.php/"images/magnifiying_glass.png" width="16" height="16">
</div>
Firstly i not sure what id or class to pu the verticle align in and second to that it does work in either :s.
Thanks
AdamThe vertical-align property is kinda tricky. It only works in two cases:
1) The vertical-align property is applied to an inline element, in which case the inline element is vertically aligned on the text line, not in the block element that contains it.
2) The vertical-align property is applied to a table cell. Both inline and block elements are aligned to the top, bottom or middle of the table cell.
The case when it doesn't work, and what you're probably running into:
1) The vertical-align property is applied to a block element (not a table cell) and the coder expects block and inline elements inside to respect it. That won't happen.
Basically there isn't a good way to vertically align a block element. The easiest way is to position the element using absolute positioning. Give that element a height. Set the top: property to 50% and then use a negative top margin equal to half the element's height to pull it up to vertical alignment.
<body>
<div id="vertPositioned">
Vertically positioned
</div>
</body>
In CSS:
#verPositioned {
height: 100px;
margin-top: -50px;
position: absolute;
top: 50%;
}
Problem is that absolutely positioning a tag takes it out of the normal document flow and creates another layer on your page. The most practical solutions are to either not care about vertical alignment (most regular users don't) or use a top margin or top padding to fudge the element down to make it look vertically aligned.
On the other hand, if you want to vertically align a single line of text, use the line-height property and apply it to a block level element. Make the line height as tall as the box in which you want to vertically align text.
<p style="line-height: 100px;">
Text is vertically aligned middle in 100px tall box
</p>mmm...
Thank you toicontien, i really appreciate the detailed answer. I will have a think on what is best.
Thank youThe vertical-align property is kinda tricky. It only works in two cases:
1) The vertical-align property is applied to an inline element, in which case the inline element is vertically aligned on the text line, not in the block element that contains it.
2) The vertical-align property is applied to a table cell. Both inline and block elements are aligned to the top, bottom or middle of the table cell.
The case when it doesn't work, and what you're probably running into:
1) The vertical-align property is applied to a block element (not a table cell) and the coder expects block and inline elements inside to respect it. That won't happen.
Basically there isn't a good way to vertically align a block element. The easiest way is to position the element using absolute positioning. Give that element a height. Set the top: property to 50% and then use a negative top margin equal to half the element's height to pull it up to vertical alignment.
<body>
<div id="vertPositioned">
Vertically positioned
</div>
</body>
In CSS:
#verPositioned {
height: 100px;
margin-top: -50px;
position: absolute;
top: 50%;
}
Problem is that absolutely positioning a tag takes it out of the normal document flow and creates another layer on your page. The most practical solutions are to either not care about vertical alignment (most regular users don't) or use a top margin or top padding to fudge the element down to make it look vertically aligned.
On the other hand, if you want to vertically align a single line of text, use the line-height property and apply it to a block level element. Make the line height as tall as the box in which you want to vertically align text.
<p style="line-height: 100px;">
Text is vertically aligned middle in 100px tall box
</p>
I tried the line height property like the shown above and it looks great in IE, but in mozilla it does not work. I have the height set to 25px and and then when I use the line-height = 25px it looks right in IE but I have to set it to line-height = 5px for it to work in FireFox, and then IE looks all jacked up. Just wondering if there is a better way of doing this.
ThanksVertical centring in all browsers:
body, html {height: 100%;}
* html #tbl {position: absolute; top: 50%;}
#tbl[id] {display: table; height: 100%;}
* html #cell {position: relative; top: -50%;}
#cell[id] {display: table-cell; vertical-align: middle;}
This uses a patch for Internet Explorer while using the correct method in other browsers.Here's more information on what felgall suggested. (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/vertically_centering_elements/">http://www.dynamicsitesolutions.com/css ... _elements/</a><!-- m -->)awesome, thanks guys, that seems to be what I was looking for.
I am having a small problem with the verticle align tag
I have this code: -
/* CSS CODE */
#search {
height:16px;
text-align:right;
vertical-align:middle;
}
.input {
font-family:Verdana;
font-size:10px;
font-weight:100;
color:#000000;
text-align:right;
border:1px solid #339933;
width:145px;
vertical-align:middle;
}
/* HTML CODE */
<div id="search">
<input name="search" type="text" value="Search this site..." class="input">
<input name="" type="image" src=http://www.webdeveloper.com/forum/archive/index.php/"images/magnifiying_glass.png" width="16" height="16">
</div>
Firstly i not sure what id or class to pu the verticle align in and second to that it does work in either :s.
Thanks
AdamThe vertical-align property is kinda tricky. It only works in two cases:
1) The vertical-align property is applied to an inline element, in which case the inline element is vertically aligned on the text line, not in the block element that contains it.
2) The vertical-align property is applied to a table cell. Both inline and block elements are aligned to the top, bottom or middle of the table cell.
The case when it doesn't work, and what you're probably running into:
1) The vertical-align property is applied to a block element (not a table cell) and the coder expects block and inline elements inside to respect it. That won't happen.
Basically there isn't a good way to vertically align a block element. The easiest way is to position the element using absolute positioning. Give that element a height. Set the top: property to 50% and then use a negative top margin equal to half the element's height to pull it up to vertical alignment.
<body>
<div id="vertPositioned">
Vertically positioned
</div>
</body>
In CSS:
#verPositioned {
height: 100px;
margin-top: -50px;
position: absolute;
top: 50%;
}
Problem is that absolutely positioning a tag takes it out of the normal document flow and creates another layer on your page. The most practical solutions are to either not care about vertical alignment (most regular users don't) or use a top margin or top padding to fudge the element down to make it look vertically aligned.
On the other hand, if you want to vertically align a single line of text, use the line-height property and apply it to a block level element. Make the line height as tall as the box in which you want to vertically align text.
<p style="line-height: 100px;">
Text is vertically aligned middle in 100px tall box
</p>mmm...
Thank you toicontien, i really appreciate the detailed answer. I will have a think on what is best.
Thank youThe vertical-align property is kinda tricky. It only works in two cases:
1) The vertical-align property is applied to an inline element, in which case the inline element is vertically aligned on the text line, not in the block element that contains it.
2) The vertical-align property is applied to a table cell. Both inline and block elements are aligned to the top, bottom or middle of the table cell.
The case when it doesn't work, and what you're probably running into:
1) The vertical-align property is applied to a block element (not a table cell) and the coder expects block and inline elements inside to respect it. That won't happen.
Basically there isn't a good way to vertically align a block element. The easiest way is to position the element using absolute positioning. Give that element a height. Set the top: property to 50% and then use a negative top margin equal to half the element's height to pull it up to vertical alignment.
<body>
<div id="vertPositioned">
Vertically positioned
</div>
</body>
In CSS:
#verPositioned {
height: 100px;
margin-top: -50px;
position: absolute;
top: 50%;
}
Problem is that absolutely positioning a tag takes it out of the normal document flow and creates another layer on your page. The most practical solutions are to either not care about vertical alignment (most regular users don't) or use a top margin or top padding to fudge the element down to make it look vertically aligned.
On the other hand, if you want to vertically align a single line of text, use the line-height property and apply it to a block level element. Make the line height as tall as the box in which you want to vertically align text.
<p style="line-height: 100px;">
Text is vertically aligned middle in 100px tall box
</p>
I tried the line height property like the shown above and it looks great in IE, but in mozilla it does not work. I have the height set to 25px and and then when I use the line-height = 25px it looks right in IE but I have to set it to line-height = 5px for it to work in FireFox, and then IE looks all jacked up. Just wondering if there is a better way of doing this.
ThanksVertical centring in all browsers:
body, html {height: 100%;}
* html #tbl {position: absolute; top: 50%;}
#tbl[id] {display: table; height: 100%;}
* html #cell {position: relative; top: -50%;}
#cell[id] {display: table-cell; vertical-align: middle;}
This uses a patch for Internet Explorer while using the correct method in other browsers.Here's more information on what felgall suggested. (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/vertically_centering_elements/">http://www.dynamicsitesolutions.com/css ... _elements/</a><!-- m -->)awesome, thanks guys, that seems to be what I was looking for.