Home > Article > Web Front-end > Why can't the text in the A tag be vertically centered in IE6? _html/css_WEB-ITnose
Why can't the text in the A tag be vertically centered in IE6? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:26:021118browse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css"> ul { margin:0; padding:0; list-style-type:none; width:300px;}ul li { border:1px solid blue;}ul li a {display:block; border:1px solid red; height:60px; line-height:60px;}ul li a img { vertical-align:middle; margin-right:10px; border:0px;} </style></head> <body> <ul> <li><a href="#"><img src="1.gif"/>Link 1</a></li> <li><a href="#"><img src="1.gif"/>Link 2</a></li> <li><a href="#"><img src="1.gif"/>Link 3</a></li> <li><a href="#"><img src="1.gif"/>Link 4</a></li> <li><a href="#"><img src="1.gif"/>Link 5</a></li> <li><a href="#"><img src="1.gif"/>Link 6</a></li> </ul></body> <!-- 为啥在IE6中，A标签中的文字不能垂直居中呢？ （我已经将 行高 line-height 和 高度Height 设置为一样的值，为啥在IE6中还不行呢？） --></html> Reply to discussion (solution)
In order to see it more clearly, I will send a code with a picture
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css"> ul { margin:0; padding:0; list-style-type:none; width:300px;}ul li { border:1px solid blue;}ul li a {display:block; border:1px solid red; height:60px; line-height:60px;} </style></head> <body> <ul> <li><a href="#"><img src="http://www.ks.edu.tw/bulletin/media/file_word.gif" alt=""/>Link 1</a></li> <li><a href="#"><img src="http://www.ks.edu.tw/bulletin/media/file_word.gif" alt=""/>Link 2</a></li> <li><a href="#"><img src="http://www.ks.edu.tw/bulletin/media/file_word.gif" alt=""/>Link 3</a></li> <li><a href="#"><img src="http://www.ks.edu.tw/bulletin/media/file_word.gif" alt=""/>Link 4</a></li> <li><a href="#"><img src="http://www.ks.edu.tw/bulletin/media/file_word.gif" alt=""/>Link 5</a></li> <li><a href="#"><img src="http://www.ks.edu.tw/bulletin/media/file_word.gif" alt=""/>Link 6</a></li> </ul></body> <!-- 为啥在IE6中，A标签中的文字不能垂直居中呢？ （我已经将 行高 line-height 和 高度Height 设置为一样的值，为啥在IE6中还不行呢？） --></html>
I rewrote it, please see why the following code doesn’t work
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css"> ul { margin:0; padding:0; list-style-type:none; width:300px;}ul li { border:1px solid blue;}ul li a {display:block; border:1px solid red; height:60px; line-height:60px;}ul li a img {vertical-align:middle; border:0px;} </style></head> <body> <ul> <li><a href="#"><img src="http://www.postgresql.org/layout/images/file.png" alt=""/>Link 1</a></li> <li><a href="#"><img src="http://www.postgresql.org/layout/images/file.png" alt=""/>Link 2</a></li> <li><a href="#"><img src="http://www.postgresql.org/layout/images/file.png" alt=""/>Link 3</a></li> <li><a href="#"><img src="http://www.postgresql.org/layout/images/file.png" alt=""/>Link 4</a></li> </ul></body> <!-- 为啥在IE6中，A标签中的文字不能垂直居中呢？ （我已经将 行高 line-height 和 高度Height 设置为一样的值，为啥在IE6中还不行呢？） --></html> text-align:center
It seems to be more difficult in ie6, use table instead. . .
Vertically centered? You can think of a way to set the line spacing of the A tag and try setting it larger. . .
The 5th floor is correct, setting line-height really works!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Different browser compatibility issues_html/css_WEB-ITnoseNext article：Different browser compatibility issues_html/css_WEB-ITnose