Html 如何在包含其他元素的列表中居中放置图像

我有一个无序列表，其中包含几个列表元素。内部还有一个要居中的图像元素。我尝试使用边距将其居中：auto；属性，但由于侧边有列表元素，因此在将其自身居中时会将其考虑在内。如何使图像相对于其容器居中

.nav{
宽度：1280px；
保证金：0自动；
字体大小：16px；
字号：500；
边框：1px纯黑；
}
李国荣先生{
浮动：左；
垂直对齐：顶部；
利润率：5x10px；
}
李海军：第一个孩子{
左边距：75px；
}
.导航img{
显示：块；
保证金：自动；
高度：21px；
宽度：24px；
}

家
片刻
通知
信息

将您的

img

元素放入

li

中，并在css中做一些更改，如下面的代码片段：

.nav-ul{
宽度：800px；
保证金：0自动；
字体大小：16px；
字号：500；
边框：1px纯黑；
填充：0；
列表样式类型：无；
文本对齐：居中；
}
李国荣先生{
显示：内联块；
垂直对齐：中间对齐；
利润率：5x10px；
}
.导航img{
显示：块；
保证金：自动；
}
.nav ul:之前，
.nav ul:之后{
内容：“；
显示：表格；
}
.nav ul:之后{
明确：两者皆有；
}

家
片刻
通知
信息

您可以使用

显示：内联块来获取它

.nav img {
  display: inline-block; /*Add this*/
  vertical-align: middle; /*Add this*/
  height: 21px;
  width: 24px;
}

.nav li {
  display:inline-block; /*Add this*/
  vertical-align: middle; /*Add this*/
  margin: 5px 10px;
}

.nav {
  text-align:center; /*Add this*/
}


.nav{
宽度：1280px；
保证金：0自动；
字体大小：16px；
字号：500；
边框：1px纯黑；
文本对齐：居中；
}
李国荣先生{
显示：内联块；
垂直对齐：中间对齐；
利润率：5x10px；
}
李海军：第一个孩子{
左边距：75px；
}
.导航img{
显示：内联块；
垂直对齐：中间对齐；
高度：21px；
宽度：24px；
}


家
片刻
通知
信息

您可能需要使用以下方法将图像
绝对
定位到
导航
元素中：

position: absolute;
left: 50%;
transform: translateX(-50%);

还有
位置：相对
导航
元素

这样，图像将忽略
nav
元素中的任何内容


正文{
边际：0px；
}
.导航{
宽度：1280px；
保证金：0自动；
字体大小：16px；
字号：500；
边框：1px纯黑；
位置：相对位置；
}
李国荣先生{
垂直对齐：顶部；
利润率：5x10px；
显示：内联；
}
李海军：第一个孩子{
左边距：75px；
}
.导航img{
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
高度：21px；
宽度：24px；
}


家
片刻
通知
信息


1） 所有元素都必须居中



家
片刻
通知
信息

它已经居中：/@AVI导航栏相对于网页居中。但是，图像相对于导航栏偏离中心。是否要将其绝对定位到页面中心？很不清楚你是什么expecting@JonesJoseph我想在导航元素中水平居中。导航元素在标题中。如果图像与列表元素重叠怎么办？实现这一点的一种方法是将其绝对定位在导航系统内的中心。但如果屏幕很小，则会与列表元素重叠。导航总是1280px宽吗？只是补充一下。自从我增加了我的线高度，我的img就在顶部。刚刚使用了top:50%，并添加了用于变换的y轴，使其垂直居中。有更好的垂直居中方法吗？@James表示绝对定位元素。。对这可能是最好的办法
.nav {
  width: 1280px;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid black;
}

.nav li {
  float: left;<------Remove
  display: inline-block;<-----------Add
  vertical-align: top;
  margin: 5px 10px;
}


nav li:first-child {
  margin-left: 75px;<---------Change to margin-left: 0px;------
}

.nav img {
  display: block;<----------Change to display: inline-block;---
  margin: auto;<---------Remove
  height: 21px;
  width: 24px;
}

.clearfix{<-----------Add this Selector
  text-align: center;
  width: 100%;
  padding-left: 0;
}