如何將圖像中的圖像居中？

我有下面這個網站：如何將圖像中的圖像居中？

<!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;，但它並未將圖像居中。還有什麼我需要做的嗎？

來源

2017-07-25 CapturedTree

未閉合的''標籤 –

你怎麼用，雖然中心的圖像是什麼意思？他們在帶有文本的'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>

來源

2017-07-25 00:48:54

因此，根據預設的圖像具有內聯塊的顯示類型使用。要使其居中，請在圖像CSS中包含以下內容。

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

來源

2017-07-25 00:58:19 alaboudi

@Rob不，你錯了。大多數瀏覽器將它們解釋爲內聯塊https://www.w3schools.com/tags/tag_img.asp。如果他們不是塊或int，他的情況下行塊，你怎麼修改imgs的寬度和高度;） – alaboudi

我沒有弄錯，但定義已經改變，這就是爲什麼我刪除了我的原始評論來查找它。我沒有必要解釋這一段時間。是一個被替換的元素，並且將具有自己的「內部」高度和寬度，使其超出CSS的範圍。它不是塊級別，但它將行爲內聯並像塊級別一樣進行操作。我沒有重讀所有這些，所以我會把它作爲一個練習。 – Rob

我忘了添加，只需查看瀏覽器的開發人員工具，就會看到用戶代理設置爲「display：inline」 – Rob

如何將圖像中的圖像居中？

回答

相關問題