Question

在li中放置图像时，为什么文本未居中对齐？如果删除img，文本将居中。我试图使两者都居中。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li>
    <span class="text">Home</span>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII="/>
  </li>
  <li>
    <span class="text">News</span>
  </li>
</ul>

</body>
</html>

Answer 1

实际上，由于 img 元素默认情况下以行内显示，因此图像也作为文本的一部分居中。

根据您的目标，您可以将 img 放在它自己的 li 上，或者将它们完全定位为这样：

li {
  position: relative;
  padding-left: 30px;
}
li img{
  position: absolute;
  left: 0;
}

https://jsfiddle.net/01ecvxfp/

Answer 2

text-align属性用于水平对齐元素，而不是垂直对齐。

只需使用<ul>将display: flex;元素更改为flexbox，然后使用align-items属性将<li>项垂直居中。同样，将<li>元素更改为flexbox并使用相同的属性将文本和图标垂直居中。

此外，您需要将CSS选择器li hover更改为li:hover。

检查并运行以下代码段，以获取上述示例：

ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
}

li {color: white;text-decoration: none;
  display: flex;
  align-items: center;
}

li:hover {background-color: #111;}

<ul>
  <li>
  	Home
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII=" />
  </li>
  <li>News</li>
</ul>

Answer 3

如果要使图像居中，请使用：

img{
 margin: auto;
}

然后使用

居中显示文字

text-align: center;

Answer 4

有多种方法可以实现垂直和水平对齐。

Flex

如@ AndrewL64所述，您可以使用flex并使用align-items属性来center元素。这是一种更现代的方法，最推荐用于创建响应式布局。

阻止

您可以将元素的display属性设置为block，然后使用margin: 0 auto将元素垂直和水平居中。

内联阻止/内联

或者您可以将元素的display属性设置为inline-block或inline，可以在其中使用text-align: center属性。重要的是要注意，此属性仅作用于block容器的内部内容，并且仅影响inline或inline-block元素。

macOS Mojave, Automator “Not authorized to send Apple events to System Events.”

为什么“文本对齐：居中”不是垂直居中的元素？

4 个答案:

Flex

阻止

内联阻止/内联