<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Script Home-css Vertical Center </title>
<script type= "Text/javascript" language= "JavaScript" >
function sel (ID) {switch (ID) {case "1":d Ocument.getelementbyid ("Sub"). Style.lineheight = "normal"; Break;case "2": document.getElementById ("Sub"). Style.lineheight = "20px"; break;case "3":d Ocument.getelementbyid ("sub"). Style.lineheight = "28px"; break;}}
</script>
<style type= "Text/css" >
#all {
width:240px;
padding:10px;
font-size:12px;
Color: #FFF;
Background-color: #CCC;
}
#sub {
width:230px;
padding:0 5px;
height:20px;
Overflow:hidden;
Background-color: #F90;
}
#sel {
margin-top:5px;
}
Select {
width:260px;
}
</style>
<body>
<p id= "All" >
<p id= "Sub" > A line of text vertically centered, this object height is 20px</p>
</p>
<p id= "sel" ><select onchange= "sel (this.value)" ><option value= "1" > Default value, set row height: normal</option ><option value= "2" > Set row Height and object height: 20px</option><option value= "3" > Set height of Row heights object is large: 28px</option ></select></p>
</body>
Method: line-height:20px. Sets the same row height and object height.
Description: This setting is simple and compatible with various browsers and supports inline objects. However, if the object is a fixed height, only one row is displayed. When there are two lines of text, if you do not set "Overflow:hidden" the object will be stretched.
two, multi-line text, and highly adaptive
Take a look at the following code:
Methods: padding-top:10px; padding-bottom:10px. Sets the same up and down padding.
Description: Compatible with various browsers, supporting inline objects, while supporting non-text objects such as IMG. But one drawback is that the height of the object cannot be fixed.
three, fixed height of multi-line text vertical Center
This method is more complicated and I will explain it in detail. Here's a look at the code first:
Method:
(1) Vertical-align:middle; Display:table-cell. This approach means that casting an object to Table,vertical-align:middle is the same as valign= "center" in the table.
It would have been a convenient property, but IE does not support this property. In order to make each browser compatible, we have to think of other methods.
(2) Create a sub-object within the object and then create a sub-object or paragraph within the child object. In the Web page:
<p id= "A" ><p><p> here with multiple lines of text, height is 50px here with multiline text, height is 50px</p></p></p>
In CSS:
p {margin:0;} : Because the default p in Firefox is spaced
#a {height:50px;position:relative;} : Sets the height 50, if the sub-object is positioned relative to it, set the position:relative
#a p {*position:absolute;*top:50%;} : Preceded by the asterisk "*" only IE support, other browsers will ignore this setting. Position:absolute sets the positioning of this sub-object to absolute positioning, the top:50% is set to appear at the top 50% of the position, that is, 25px (because the height of the parent object is set to 50px).
#a p p {*position:relative;*top:-50%;} : This code can only be understood to move up to 50% of the remaining height. Because top sets a negative value, it is equivalent to moving in the opposite direction.
Description: Supports mainstream browsers (tested under Ie6,firefox2).
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
