Question

我从CSS开始，我想不出无序列表中包含图片。

我想在导航栏ul中放置徽标，并将文本居中放置，但它会粘贴到Ul的底部。

这里有代码和我想要的内容 Fiddle

HTML：

<body>
    <header>
        <nav id="navbar">
            <ul>
                <li><b><a href="index.html"><img class="logo" src="https://i28.servimg.com/u/f28/09/04/03/75/a_2_li10.png" alt="HOME"></a></b></li>
                <li><b><a href="more.html">MORE</a></b></li>
                <li><b><a href="services.html">SERVICES</a></b></li>
                <li><b><a href="blog.html">BLOG</a></b></li>
                <li><b><a href="shop.html">SHOP</a></b></li>
            </ul>
        </nav>
    </header>
</body>

body {
    background-color: #294F6D;
    margin: 0;
}

#navbar ul {
    margin: 0;
    list-style: none;
    background-color:  #303E73;
    text-align: center;

}

#navbar li {
    display: inline-block;
    background-color: #A13647;
    padding: 20px 50px
}

.logo {
    width: 100px;
}

Answer 1

display: flex是您的朋友在这里：

body {
  background-color: #294F6D;
  margin: 0;
}

#navbar ul {
  align-items: center;
  display: flex;
  margin: 0;
  list-style: none;
  background-color:  #303E73;
  text-align: center;

}

#navbar li {
  background-color: #A13647;
  padding: 20px 50px
}

a {
  text-decoration: none;
  color:white;
}

a:hover {
  text-decoration: underline;
}

.logo {
  width: 100px;
}

<header>
    <nav id="navbar">
            <ul>
                <li><b><a href="index.html"><img class="logo" src="https://i28.servimg.com/u/f28/09/04/03/75/a_2_li10.png" alt="HOME"></a></b></li>
                <li><b><a href="more.html">MORE</a></b></li>
                <li><b><a href="services.html">SERVICES</a></b></li>
                <li><b><a href="blog.html">BLOG</a></b></li>
                <li><b><a href="shop.html">SHOP</a></b></li>
            </ul>
    </nav>
</header>

签出Flexbox on caniuse，因为它在Internet Explorer中仍然存在一些极端情况。这个示例应该可以正常工作。

Answer 2

您只需要vertical-align: middle;。

您可以在此处将其添加到CSS中：

#navbar li {
    display: inline-block;
    background-color: #A13647;
    padding: 20px 50px;
    vertical-align: middle;
}

这是一个可行的示例：

body {

    background-color: #294F6D;
    margin: 0;
}

#navbar ul {
    margin: 0;
    list-style: none;
    background-color:  #303E73;
    text-align: center;

}

#navbar li {
    display: inline-block;
    background-color: #A13647;
    padding: 20px 50px;
    vertical-align: middle;
}

.logo {
    width: 100px;
}

<header>
    <nav id="navbar">
            <ul>
                <li><b><a href="index.html"><img class="logo" src="https://i28.servimg.com/u/f28/09/04/03/75/a_2_li10.png" alt="HOME"></a></b></li>
                <li><b><a href="more.html">MORE</a></b></li>
                <li><b><a href="services.html">SERVICES</a></b></li>
                <li><b><a href="blog.html">BLOG</a></b></li>
                <li><b><a href="shop.html">SHOP</a></b></li>
            </ul>
    </nav>
</header>

Answer 3

body {
    background-color: #294F6D;
    margin: 0;
}

#navbar ul {
    margin: 0;
    list-style: none;
    background-color: #303E73;
    /* text-align: center; */
    display: flex;
    justify-content: center;
    align-items: center;
}

#navbar li {
    display: inline-block;
    background-color: #A13647;
    padding: 20px 50px;
}
#navbar li a {
  text-decoration: none;
  color: #000000;
}
.logo {
    width: 100px;
}

<body>
    <header>
        <nav id="navbar">
            <ul>
                <li><b><a href="index.html"><img class="logo" src="https://i28.servimg.com/u/f28/09/04/03/75/a_2_li10.png" alt="HOME"></a></b></li>
                <li><b><a href="more.html">MORE</a></b></li>
                <li><b><a href="services.html">SERVICES</a></b></li>
                <li><b><a href="blog.html">BLOG</a></b></li>
                <li><b><a href="shop.html">SHOP</a></b></li>
            </ul>
        </nav>
    </header>
</body>

如何在包含图像的列表中垂直居中放置文本

3 个答案: