Question

所有

我对CSS布局很新，目前我有一个非常简单的布局：

http://placehold.it/16/16

span.icons {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: lightblue;
  text-align: center;
}

<html>
<head>
</head>
<body>
<span class="icons">
	<img src="http://placehold.it/16/16" />
</span>
</body>
</html>

它是如此奇怪，因为相同的HTML工作得很好，当我将它粘贴在这个问题并在这里运行它，但它只是在我的本地工作，即使我使用相同的浏览器，这是它在我看来是什么样的当地：

我想要做的是对图像（16 x 16像素）进行居中对齐（仅垂直对准），但图像始终位于顶部中心。

任何人都可以帮助中心对齐它并用为什么它现在不起作用进行一些解释？

Thansk

Answer 1

指定的代码按要求工作但是我注意到没有声明DOCTYPE。这可能导致浏览器输入Quirks Mode ....这将导致页面呈现不一致。

相关Do modern browsers care about the DOCTYPE?

span.icons {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: lightblue;
  text-align: center;
}

<span class="icons">
    <img src="http://lorempixel.com/image_output/nature-q-g-16-16-7.jpg"/>
</span>

当然，现在，我使用的是flexbox：

span.icons {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-color: lightblue;
  justify-content: center;
  align-items: center;
}

<span class="icons">
    <img src="http://lorempixel.com/image_output/abstract-q-c-16-16-1.jpg">
</span>

Answer 2

你的意思是什么？

span.icons {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: lightblue;
  text-align: center;
}

<span class="icons">
    <img src="http://placehold.it/16/16">
</span>

至于您的代码无效的原因：

定义DOCTYPE是差异

Answer 3

尝试添加

vertical-align: middle;

https://jsfiddle.net/5ky6jLuj/1/

无法垂直居中对齐图像元素

3 个答案: