Question

我知道我有很多相同的问题，但是似乎我的代码有问题。我正在尝试创建一个网站，现在我要寻找的布局是最顶部的徽标，其后是品牌名称，然后在其下方是导航栏。我先做了导航栏，但是当尝试放置图像时，我无法调整其大小，更不用说将其居中与文本了。有人可以帮助我实现我想要做的事情，或者至少解释我做错了什么吗？谢谢

P.S。这是我的代码。

body {
    margin: 0;
    padding: 0;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: sticky;
}

li{
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.6s ease;
}

li a:hover {
    background-color: #111;
}

.logo img{
    float: center;
    width: 80;
    height: 80;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style2.css">
    <title>QPlugs</title>
</head>
<body>
    <header>
        <div class="main">
            <div class="logo">
                <img src="logo.PNG">
            </div>
            <ul>
                <li><a href="#Home">Home</a> </li>
                <li><a href="#Join">Join</a> </li>
                <li><a href="#Shop">Shop</a> </li>
                <li><a href="#About">More Info</a> </li>
            </ul>
        </div>
    </header>
</body>
</html>

P.S.S。如果有帮助，当我检查页面上的图像时，会得到this thing here.

Answer 1

没有 float: center。相反，您可以在text-align: center;（图像的容器）上使用.logo。并且您需要在图像的px和width上使用height单元。

顺便说一句：自从您写了关于居中图像和文字的内容以来，我在代码段中添加了一个h1，它也通过text-align: center居中。（如果要更改上下两个元素之间的默认距离，也可以为margin-top和margin-bottom添加设置

body {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: sticky;
}

li {
  float: left;
}

h1 {
  text-align: center;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.6s ease;
}

li a:hover {
  background-color: #111;
}

.logo {
  text-align: center;
}

.logo img {
  width: 80px;
  height: 80px;
}

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

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style2.css">
  <title>QPlugs</title>
</head>

<body>
  <header>
    <div class="main">
      <div class="logo">
        <img src="logo.PNG">
      </div>
      <h1>Header Text</h1>
      <ul>
        <li><a href="#Home">Home</a> </li>
        <li><a href="#Join">Join</a> </li>
        <li><a href="#Shop">Shop</a> </li>
        <li><a href="#About">More Info</a> </li>
      </ul>
    </div>
  </header>
</body>

</html>

Answer 2

使用显示：flex更加易于使用和灵活

body {
    margin: 0;
    padding: 0;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: sticky;
}

li{
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.6s ease;
}

li a:hover {
    background-color: #111;
}

.logo {
  display: flex;
  justify-content: center;
}

.logo img{
    width: 80px;
    height: 80px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style2.css">
    <title>QPlugs</title>
</head>
<body>
    <header>
        <div class="main">
            <div class="logo">
                <img src="logo.PNG">
            </div>
            <ul>
                <li><a href="#Home">Home</a> </li>
                <li><a href="#Join">Join</a> </li>
                <li><a href="#Shop">Shop</a> </li>
                <li><a href="#About">More Info</a> </li>
            </ul>
        </div>
    </header>
</body>
</html>

如何正确居中和调整图像大小？

2 个答案: