Question

您好，我是HTML和CSS的新手，我正在尝试创建一个仅供学习的网站。我只是做了一个标题，并在其中放置了徽标，但无法将其设置为垂直对齐。有人可以解释吗？

这是HTML文件：

<!DOCTYPE html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Scienitive</title>
</head>
<body>
    <div class="header">
        <div class="logo-container">
            <div class="logo">
                <a href ="index.html"><img src ="logo.png"></a>
            </div>
            <h1>Scienitive</h1>
        </div>
    </div>
</body>

这是CSS文件：

.header {
width: 100%;
height: 80px;
display: block;
background-color: #FF5733;
}
.logo-container {
height: 100%;
display: table;
float: left;
}
.logo-container h1{
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Open Sans";
font-size: 48px;

}
.logo {
display: table;
height: 80px;
}
.logo img{
width: 48px;
height: 48px;
vertical-align: middle;
display: table-cell;
}

这是网站的外观 Image

Answer 1

您实际上不想直接在display: table-cell标记上设置vertical-align: middle或img，而是在其容器/父项上设置：

.header {
  width: 100%;
  height: 80px;
  display: block;
  background-color: #FF5733;
}

.logo-container {
  height: 100%;
  display: table;
  float: left;
}

.logo-container h1 {
  color: white;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  font-family: "Open Sans";
  font-size: 48px;
}

.logo {
  display: table-cell;
  vertical-align: middle;
  height: 80px;
}

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

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Scienitive</title>
</head>

<body>
  <div class="header">
    <div class="logo-container">
      <div class="logo">
        <a href="index.html"><img src="//placehold.it/48x48"></a>
      </div>
      <h1>Scienitive</h1>
    </div>
  </div>
</body>

Answer 2

vertical-align将在表格单元容器中设置，该.logo应为

关于阅读有关垂直对齐的提示：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

  .header {
  width: 100%;
  height: 80px;
  display: block;
  background-color: #FF5733;
}

.logo-container {
  height: 100%;
  display: table;
  float: left;
}

.logo-container h1 { 
  display: table-cell;
  vertical-align: middle;
  font-family: "Open Sans";
  font-size: 48px;
}

.logo {
  display: table-cell;
  vertical-align:middle;;
  height: 80px;
}

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

<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<body>
  <div class="header">
    <div class="logo-container">
      <div class="logo">
        <a href="index.html"><img src="logo.png"></a>
      </div>
      <h1>Scienitive</h1>
    </div>
  </div>

如果要单击的区域应该仅是图像，则可以考虑使用flex将内容居中或通过指针事件减少点击区域。请澄清是否

为什么我不能为img标签设置垂直对齐中间

2 个答案: