The problem with how you set up the CSS in order to center text vertically in an object is also a puzzle that binds many friends. A lot of code on the Web is now not browser compatible. I have done some of the online related methods, made some changes, fully compatible with the mainstream browsers.
Here's a concrete way to center vertically under different circumstances.
One line of text vertically centered
Take a look at the following code:
Copy Code code as follows:
<! 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> Cloud-dwelling Community-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>
<div id= "All" >
<div id= "Sub" > Line text vertically, this object is height 20px</div>
</div>
<div id= "sel" ><select onchange= "sel (this.value)" ><option value= "1" > Default value, set row height to: normal</option ><option value= "2" > Set row Height and object height: 20px</option><option value= "3" > Set height of row height larger than object: 28px</option ></select></div>
</body>
Methods: line-height:20px. Sets the same row height and object height.
Description: This setup is simple and compatible with various browsers and supports inline objects. However, if the object is a fixed height, only one row can be displayed. When there are two lines of text, if you do not set "Overflow:hidden" will open the object.
two, multiple lines of text, and highly adaptive
Take a look at the following code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> cloud-dwelling Community-www.jb51.net-css Vertical center </title> <script type=" Text/javascript " language= "JavaScript" > function sel (ID) {switch (ID) {case "1":d Ocument.getelementbyid ("Sub"). InnerHTML = three lines of text centered vertically , you can set the same inner top margin padding-top and the inner and bottom margin padding-bottom. "; Break;case" 2 ":d Ocument.getelementbyid (" Sub "). InnerHTML =" Two lines of text are centered vertically, setting the same inner and bottom margins padding-top and padding-bottom. " "; Break;case" 3 ":d Ocument.getelementbyid (" Sub "). InnerHTML =" One line of text is centered vertically with the same top and bottom margin. "; break;}} </script> <style type= "Text/css" > #all {float:left; width:240px; padding:10px; font-size:12px; Color: #FFF; Background-color: #CCC; } #sub {float:left; width:230px; padding:10px 5px; Background-color: #F90; } #sel {Clear:both; padding-top:5px; width:260px; } select {width:260px; </style> </pead> <body> <div id= "All" > <div id= "sub" > Three line text centered vertically, setting the same inner top margin padding-top and inner The bottom margin padding-bottom is OK. </div> </div> <div id= "sel" ><select onchange= "sel (this.value)" ><option value= "1" > Three lines of text vertically centered </option><option value= "2" > two lines of text vertically centered </option><option value= "3" > one line of text vertically centered </ Option></select></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Methods: padding-top:10px; padding-bottom:10px. Sets the same upper and lower margins.
Description: Compatible with various browsers, support inline objects, while supporting non-text objects, such as IMG. But there is a drawback is that the height of the object can not be fixed.
Current 1/2 page
12 Next read the full text
