在 div 内定位元素，inline

Question

我需要在 div 中定位元素，这里是当前的 div:

这是你想要的：

这里是html和css

的代码

#channel-header * {
  display: inline-block;
}

#channel-title {
  position: absolute;
}

<div id="channel-header">
  <img src="images/lfc-kanal.png" id="avatar-kanala">
  <div id="channel-title">
    <h3>LFCOfficial</h3>
    <p>828,277 subscribers</p>
    <a href="#" class="button" id="sub-button">Subscribe 828K</a>
  </div>
</div>

Answer 1

我建议使用 flexbox 轻松创建 3 列并垂直对齐。

#channel-header {
  display: flex;
  align-items: center;
  /* Vertical alignment */
  justify-content: flex-start;
  /* Horizontal alignment */
}

img {
  border-radius: 100%;
}

.button {
  text-decoration: none;
  color: white;
  background-color: red;
  border-radius: 50px;
  padding: 1rem;
  margin-left: auto;
}

#channel-title {
  margin-left: 2rem;
}

<div id="channel-header">
  <img src="https://via.placeholder.com/150x150" id="avatar-kanala">
  <div id="channel-title">
    <h3>LFCOfficial</h3>
    <p>828,277 subscribers</p>
  </div>
  <a href="#" class="button" id="sub-button">Subscribe 828K</a>
</div>

在 div 内定位元素，inline

Positioning elements inside div, inline

html

css

element