Heim > Artikel > Web-Frontend > 为啥在IE6中，A标签中的文字不能垂直居中呢？_html/css_WEB-ITnose
为啥在IE6中，A标签中的文字不能垂直居中呢？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:26:021095Durchsuche
<!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"/ alt="为啥在IE6中，A标签中的文字不能垂直居中呢？_html/css_WEB-ITnose" >Link 1</a></li> <li><a href="#"><img src="1.gif"/ alt="为啥在IE6中，A标签中的文字不能垂直居中呢？_html/css_WEB-ITnose" >Link 2</a></li> <li><a href="#"><img src="1.gif"/ alt="为啥在IE6中，A标签中的文字不能垂直居中呢？_html/css_WEB-ITnose" >Link 3</a></li> <li><a href="#"><img src="1.gif"/ alt="为啥在IE6中，A标签中的文字不能垂直居中呢？_html/css_WEB-ITnose" >Link 4</a></li> <li><a href="#"><img src="1.gif"/ alt="为啥在IE6中，A标签中的文字不能垂直居中呢？_html/css_WEB-ITnose" >Link 5</a></li> <li><a href="#"><img src="1.gif"/ alt="为啥在IE6中，A标签中的文字不能垂直居中呢？_html/css_WEB-ITnose" >Link 6</a></li> </ul></body> <!-- 为啥在IE6中，A标签中的文字不能垂直居中呢？ （我已经将 行高 line-height 和 高度Height 设置为一样的值，为啥在IE6中还不行呢？） --></html> 回复讨论(解决方案)
为了看得更清楚，我发一个带图片的代码
<!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>
我重写了下，你们看看下面的代码为啥不行呢
<!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
貌似在ie6比较困难，改用table吧。。。
垂直居中？你想想办法设置那个A标签行间距再设置大一些试试。。。
5楼正确，设置line-height果然有效！
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：不同浏览器 兼容性问题_html/css_WEB-ITnoseNächster Artikel：网站导航栏有下拉菜单，但是下拉菜单出现后会把下面的内容顶下去，这个怎么办？？？求大神_html/css_WEB-ITnose