First look at the following:
Here is the CSS code:
<style type= "TEXT/CSS" >/* allows images of unknown size, single-line text, multiline text to be horizontally vertically centered */. Wrap {border:1px solid #0094ff; width:200px; height:200px; /* Below is the key to achieve vertical centering, not one */Display:table-cell; Text-align:center; Vertical-align:middle; }. Wrap. Subwrap. Content img {/* Clears a few pixels of blank space below the picture */vertical-align:middle; }. Wrap. Subwrap. Single (/*) to have one line of text centered vertically within the container, just set the line of text higher than the height of the container */Line-heig ht:200px; }/*ie 7 Browser */. Wrap {*display:block; *position:relative; *float:left; }. Wrap. subwrap {*position:absolute; *top:50%; *left:50%; }. Wrap. subwrap. content {*position:relative; *top:-50%; *left:-50%; } ≪/style>
Here is the HTML code:
<H3>Implement images with unknown dimensions, single line of text, horizontal vertical centering of multiline text</H3> <Divclass= "Wrap"> <Divclass= "Subwrap"> <Divclass= "Content"> <imgsrc= "Http://static.cnblogs.com/images/logo_small.gif" /> </Div> </Div> </Div> <Divclass= "Wrap"> <Divclass= "Subwrap"> <Divclass= "Content single">single-line text</Div> </Div> </Div> <Divclass= "Wrap"> <Divclass= "Subwrap"> <Divclass= "Content">Multiline text vertically centered multiline text vertically centered multiline text vertically centered multiline text vertically centered multiline text vertically centered</Div> </Div> </Div>
The following is the complete code:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Horizontally vertically centers images, single-line text, and multiline text in unknown dimensions</title> <styletype= "Text/css"> /*horizontally vertically centers images, single-line text, and multiline text in unknown dimensions*/. Wrap{Border:1px solid #0094ff;width:200px;Height:200px; /*here is the key to achieving vertical centering, none of which*/Display:Table-cell;text-align:Center;vertical-align:Middle; }. Wrap. Subwrap. Content img{ /*clear a few pixels of white space below the picture*/vertical-align:Middle; }. Wrap. Subwrap. Single{ /*to center a single line of text vertically within the container, simply set the line of text higher than the height of the container*/Line-height:200px; } /*IE 7 Browser below*/. Wrap{*display:Block;*position:relative;*float: Left; }. Wrap. Subwrap{*position:Absolute;*top:50%;*left:50%; }. Wrap. Subwrap. Content{*position:relative;*top:-50%;*left:-50%; } </style></Head><Body> <H3>Implement images with unknown dimensions, single line of text, horizontal vertical centering of multiline text</H3> <Divclass= "Wrap"> <Divclass= "Subwrap"> <Divclass= "Content"> <imgsrc= "Http://static.cnblogs.com/images/logo_small.gif" /> </Div> </Div> </Div> <Divclass= "Wrap"> <Divclass= "Subwrap"> <Divclass= "Content single">single-line text</Div> </Div> </Div> <Divclass= "Wrap"> <Divclass= "Subwrap"> <Divclass= "Content">Multiline text vertically centered multiline text vertically centered multiline text vertically centered multiline text vertically centered multiline text vertically centered</Div> </Div> </Div></Body></HTML>
How do I make an unknown size picture, a single line of text, and a multiline text horizontally vertically centered?
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
