如何将图像中的图像居中？

问题描述：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 

     <link rel="stylesheet" href="event.css"> 
    </head> 

    <body> 
     <header class="header-container"> 
      <div class="navigation"> 
       <div class="navigation-content"> 
        <h1 class="heading"> 
         Test 
        </h1> 
        <ul class="heading-list"> 
         <li>Sell<img src="money.png"></li> 
         <li>Buy<span><img src="tickets.png"></li> 
         <li>Sign in<span><img src="locked.png"></li> 
        </ul> 
       </div> 
      </div> 
     </header> 
    </body> 
</html>

低于这个CSS：

body { 
    font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif; 
    margin: 0; 
    padding: 0; 
    font-size: 14px; 
    background-color: #F6F8F9; 
} 

.header-container { 
    background-color: #260354; 
    width: 100%; 
    position: relative; 
} 

.navigation { 
    width: 100%; 
    max-width: 1280px; 
    margin: 0 auto; 
} 

.navigation-content { 
    padding: 15px 30px; 
    border-bottom: none; 
} 

.heading { 
    color: white; 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
} 

.heading-list { 
    float: right; 
    list-style: none; 
    overflow: hidden; 
} 

.heading-list li { 
    color: white; 
    float: left; 
    padding-right: 30px; 
} 

.heading-list li img { 
    color: white; 
    width: 24px; 
    height: 24px; 
    margin-left: 10px; 
    text-align: center; 
}

在导航列表右上角（ul）我想在li文字居中这些图片我CSS。我试图在.heading-list li img上放置text-align: center;，但它并未将图像居中。还有什么我需要做的吗？

未闭合的''标签 –

你怎么用，虽然中心的图像是什么意思？他们在带有文本的'li'标签中，所以文本放置在左侧，图像放在右侧。 – terryeah

答

可以使用Flexbox的，正如我在这个例子中

body { 
 
    font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 14px; 
 
    background-color: #F6F8F9; 
 
} 
 

 
.header-container { 
 
    background-color: #260354; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.navigation { 
 
    width: 100%; 
 
    max-width: 1280px; 
 
    margin: 0 auto; 
 
} 
 

 
.navigation-content { 
 
    padding: 15px 30px; 
 
    border-bottom: none; 
 
} 
 

 
.heading { 
 
    color: white; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
} 
 

 
.heading-list { 
 
    float: right; 
 
    list-style: none; 
 
    overflow: hidden; 
 
} 
 

 
.heading-list li { 
 
    color: white; 
 
    float: left; 
 
    padding-right: 30px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.heading-list li img { 
 
    color: white; 
 
    width: 24px; 
 
    height: 24px; 
 
    margin-left: 10px; 
 
    text-align: center; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 

 
    <link rel="stylesheet" href="event.css"> 
 
</head> 
 

 
<body> 
 
    <header class="header-container"> 
 
    <div class="navigation"> 
 
     <div class="navigation-content"> 
 
     <h1 class="heading"> 
 
         Test 
 
        </h1> 
 
     <ul class="heading-list"> 
 
      <li> 
 
      <span>Sell</span> 
 
     <img src="https://pbs.twimg.com/profile_images/3038657495/3d2f325c92060a35e7ac8c697c57d8d4.jpeg"> 
 
     </li> 
 
     <li> 
 
     <span>Buy</span> 
 
     <img src="https://pbs.twimg.com/profile_images/630664501776527361/nIK2xTUE.jpg"> 
 
      
 
     </li> 
 
      <li> 
 
     <span>Sign in</span> 
 
    <img src="http://www.dailyworldfacts.com/wp-content/uploads/2011/06/facts-about-cat-fallen-cat.jpg"> 
 
     
 
    </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </header> 
 
    </body> 
 
</html>

答

因此，根据预设的图像具有内联块的显示类型使用。要使其居中，请在图像CSS中包含以下内容。

display: block; 
margin-left: auto; 
margin-right: auto

@Rob不，你错了。大多数浏览器将它们解释为内联块https://www.w3schools.com/tags/tag_img.asp。如果他们不是块或int，他的情况下行块，你怎么修改imgs的宽度和高度;） – alaboudi

我没有弄错，但定义已经改变，这就是为什么我删除了我的原始评论来查找它。我没有必要解释这一段时间。是一个被替换的元素，并且将具有自己的“内部”高度和宽度，使其超出CSS的范围。它不是块级别，但它将行为内联并像块级别一样进行操作。我没有重读所有这些，所以我会把它作为一个练习。 – Rob

我忘了添加，只需查看浏览器的开发人员工具，就会看到用户代理设置为“display：inline” – Rob

如何将图像中的图像居中？

相关推荐