HTMLCSS如何使添加到選單的影像居中？-有解無憂

我正在嘗試制作這樣的選單：

HTML CSS 如何使添加到選單的影像居中？

我是這樣做的：

HTML CSS 如何使添加到選單的影像居中？

如何將選單中的專案與圖片居中？這是我的作業，即使我嘗試過，我也做不到。在此先感謝您的幫助。

body {
    font-family: Poppins;
    background-color: #F5F6F6;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.top-space {
    height: 25px;
}

.navbar ul li {
    display: inline;
}

.navbar ul li a {
    text-decoration: none;
    line-height: 50px;
}

.navbar ul li img {
    height: 50px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/style.css">
</head>

<body>
    <div class="container">
        <div class="top-space"></div>
        <div class="navbar">
            <ul>
                <li>
                    <a href=""><img src="./img/logo.png"> </a>
                </li>
                <li><a href="">adssdaads</a></li>
                <li><a href="">adssdaads</a></li>
                <li><a href="">adssdaads</a></li>
                <li><a href="">adssdaads</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

如果您能告訴我您撰寫的代碼的作業原理，我將不勝感激。

uj5u.com熱心網友回復：

您必須添加display:flex;，如下所示：

.navbar ul{display:flex;}

uj5u.com熱心網友回復：

我會這樣做，給display flex所有導航選單項的包裝，在這種情況下ul。然后使用align-content: center使串列項垂直居中。

body {
    font-family: Poppins;
    background-color: #F5F6F6;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.top-space {
    height: 25px;
}
.navbar ul {
  display: flex;
  align-content: center;
}
.navbar ul li {
    display: inline;
}

.navbar ul li a {
    text-decoration: none;
    line-height: 50px;
}

.navbar ul li img {
    height: 50px;
    width: 50px;
    
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/style.css">
</head>

<body>
    <div class="container">
        <div class="top-space"></div>
        <div class="navbar">
            <ul>
                <li>
                    <a href=""><img src="http://uploads.refuzion.nl/stock.jpeg"> </a>
                </li>
                <li><a href="">adssdaads</a></li>
                <li><a href="">adssdaads</a></li>
                <li><a href="">adssdaads</a></li>
                <li><a href="">adssdaads</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

我希望這對你有所幫助。如果不讓我知道，我會進一步調查。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/529544.html

標籤：htmlcss

上一篇：對sympy輸出中的產品總和進行排序

下一篇：如何自動用點填充div