Question

我在下面有这个HTML：

<!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）我想在我的css中使用li文本居中这些图片。我尝试将text-align: center;放在.heading-list li img上，但它不是图像的中心。还有什么我必须要做的吗？

Answer 1

您可以使用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>

Answer 2

因此默认情况下，图像的显示类型为内联块。要使其居中，请在图像css中包含以下内容。

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

如何将图像置于里面？

2 个答案: