< 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>