CSS vertical center of IMG

Source: Internet
Author: User
< Div Style = "Border: solid 1px # CCC ;" > < IMG Style = "Vertical-align: middle ;" SRC = "Http://imixc.com/content/images/close.png" /> Align the image and text vertically using CSS </ Div > < BR /> < BR />
< Div Style = "Border: solid 1px # CCC ;" > < IMG SRC = "Http://imixc.com/content/images/close.png" /> This is the effect of no style </ Div > < BR /> < BR />
< Div Style = "Border: solid 1px # CCC ;" > < IMG Align = Absmiddle SRC = "Http://imixc.com/content/images/close.png" /> Align = absmiddle is used to align the image and text vertically. </ Div >
< Div Style = "Border: solid 1px # CCC ;" > < Input Type = "Image" ID = "Cibtn" SRC = "Http://imixc.com/content/images/close.png" Onclick = "Return false ;" /> Vertical center alignment of image and text is not implemented </ Div >
< Div Style = "Border: solid 1px # CCC ;" > < Input Type = "Image" ID = "Cibtn" SRC = "Http://imixc.com/content/images/close.png" Align = "Absmiddle" Onclick = "Return false ;" /> Align the image and text vertically </ Div >

The bottom edge of the absbottom image is aligned with the bottom edge of the largest element in the same row.
The center of the absmiddle image is aligned with the center of the largest element in the same row
Align the bottom edge of the baseline image with the bottom edge of the first line of text
Bottom edge of the bottom image is aligned with the bottom edge of the first line of text
The left image is aligned along the left edge of the webpage, and the text is wrapped on the right of the image
Align the middle of the middle image with the bottom edge of the first line of text
Notset alignment not set
The right image is aligned along the right edge of the webpage, and the text is wrapped on the left of the image
The top edge of the top image is aligned with the top edge of the highest element on the same line
The top edge of the texttop image is aligned with the top edge of the top text on the same line

Check that absmiddle has been abandoned by W3C, using the following method:

<Div style = "vertical-align: center; Height: 40px; Border: solid 1px # CCC;">

Align the image and text vertically
</Div>

<Div style = "vertical-align: center; Height: 40px; Border: solid 1px # CCC;">
<Input type = "image" id = "cibtn" src = "http://imixc.com/content/images/close.png" style = "vertical-align: middle;" onclick = "Return false;"/>
Align the image and text vertically
</Div>

</Html>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.