Home > Web Front-end > HTML Tutorial > 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

WBOY
Release: 2016-06-24 12:26:02
Original
1127 people have browsed it

<!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> 
Copy after login


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> 
Copy after login


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> 
Copy after login

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!

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template