HTML 在无序列表中垂直对齐文本和图像

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>Vertical align text and image within an unordered list</title>
		<style>
		
		ul {
			margin: 10px;
			list-style-type: none;
		}

		ul li {
			font-size: 20px;
			padding: 0;
			margin-top: 10px;
			margin-bottom: 10px;
		}

		img {
			margin-right: 5px;
			vertical-align: middle;
			border: 1px solid #ccc;
			height: 30px;
			width: 30px;
		}

		ul li a {
			text-decoration: none
		}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#"><img src="" />Text link 1</a></li>
			<li><a href="#"><img src="" />Test link 2</a></li>
			<li><a href="#"><img src="" />Text link 3</a></li>
			<li><a href="#"><a href="#"><img src="" />Text link 4</a></li>
			<li><a href="#"><img src=""/>Text link 4</a></li>
		</ul>
	</body>
</html>

图像垂直对齐问题

【中文标题】图像垂直对齐问题【英文标题】：image vertical alignment issue 【发布时间】：2010-12-21 18:16:34 【问题描述】：

我有一张想要与一些文本垂直对齐的图像。图像没有边框，没有间距，并且已正确裁剪。但是，它在 IE 和 Firefox 中的对齐方式不同，我不知道为什么。

在 IE 中对齐：

FF 中的对齐方式：

请注意，在 FF 中，X 框与文本底部齐平。我使用的 HTML 是：

<div id="Header">
    <a href="#" onclick="return false;">Close</a>
    <a href="#" onclick="return false;"><img src="App_Themes/Dark/images/close-button.gif"  style="border-width:0px;" /></a>
</div>

样式表的相关部分如下所示：

#Header img

    vertical-align: middle;
    display: inline-block;

我过去通过将图像元素设置为块元素来处理此问题，但仅当图像是容器中的唯一元素时才有效。我该如何解决这个问题？

【问题讨论】：

图片可以是header div上的背景图片吗？如果是这样，那么您可以拥有 background-position:center center; 我刚刚因问题失去了 3 个小时的生命。谢谢。 【参考方案1】：

随意的想法：

为什么是内联块，这不应该作为内联工作吗？ x 上是否有一些边距或填充？你能用 Firebug 确认一下吗？ “中间”不是错误的对齐方式吗？假设您想将它们沿基线对齐，不应该是“基线”吗？ 如果将两个&lt;a&gt; 标签合并为一个会怎样？

【讨论】：

Inline-block 是一个没有效果的尝试修复。 Firebug 报告没有边距/填充。我实际上希望它中间对齐。我指出了基线作为差异的说明。当我将两者合并为一个标签时，什么也没有发生。 这很奇怪。你能试试如果你用老式的“align='absmiddle'”来看看会不会带来什么变化吗？【参考方案2】：

试试

#Header 
  vertical-align: middle;

注意，我在严格标准模式下对此进行了测试。它似乎对 IE6 没有影响，但在 IE8 和 FF3 上移动了图像。

【讨论】：

【参考方案3】：

你不应该需要内联块，这是图像的默认显示值，除非你在级联中将它重置得更高，这就是它似乎没有效果的原因。

由于我看不到 Firebug 的演示页面，我会猜测您的字体大小，因此行高是不同的。尝试为容器元素或 a 标签指定行高。如果浏览器中的行高不同（它们很可能），那么您要对齐的“中间”和顶部将会不同，而“基线”理论上应该跨浏览器/字体大小/行产生相同的结果-高度。

【讨论】：

以上是关于HTML 在无序列表中垂直对齐文本和图像的主要内容，如果未能解决你的问题，请参考以下文章

如何垂直对齐无序 html 列表中的项目？

html css垂直列表对齐顶部

垂直对齐表格中的图像和文本

CSS：有没有办法在每个列表元素之前垂直对齐数字/项目符号？

CSS：有没有办法在每个列表元素之前垂直对齐数字/项目符号？

CSS：有没有办法在每个列表元素之前垂直对齐数字/项目符号？