Question

我正在尝试将两个项目放在每个项目旁边的一个div中，<img>和<h1>。我正在尝试inline-block，但它似乎不起作用。我希望<img>和<h1>在其div中居中。此外，如果可以，我希望<h1>与左侧<img>的中心平齐。距离顶部与下方的距离相等。

body {
  background-color: #FDFDFD;
  font-family: 'Audiowide', cursive;
  margin: 0;
}

.yaboi,
.hd2 {
  background-color: white;
  width: 80%;
  margin: auto;
  height: 100%;
}

.plswork {
  margin-left: auto;
  margin-right: auto;
  /* display:inline-block; */
}

.yaboi .plswork h1 {
  display: inline-block;
  text-align: center;
  float: left;
}

.yaboi .plswork img {
  display: inline-block;
  width: 50%;
  float: left;
}

<body style="background-color: #f2f2f2;">
  <div class="yaboi">
    <div class="plswork">
      <img src="188104.jpg" alt="PC with keyboard and mouse" />
      <h1>Falcon Tech</h1>
    </div>
  </div>
  <div class="hd2">
  </div>
</body>

Answer 1

有几种方法可以做到这一点。既然你提到你试图使用内联块元素来实现这一点，我将首先展示如何做到这一点：

.plswork {
    text-align: center;
}
.plswork img,
.plswork h1 {
    display: inline-block;
    vertical-align: middle;
}

<div class="plswork">
    <img src="http://via.placeholder.com/100x10">
    <h1>Falcon Tech</h1>
</div>

小提琴：https://jsfiddle.net/4s4Lmhnn/

浮动通常不适合水平居中，因此您会注意到我的解决方案没有使用浮动。

从您的问题中不清楚您是否希望在包含元素中水平或垂直居中。我假设您只想要水平居中，但我的解决方案确实将img和h1垂直对齐。

相反，如果您需要两个元素在未知高度的容器内垂直居中，那么flexbox是一个不错的选择：

.plswork { display: flex; height: 200px; align-items: center; justify-content: center; }

小提琴：https://jsfiddle.net/3hxb2xo3/2/

似乎无法居中两个浮动标签

1 个答案: