html - CSS - 无法在 div 内将图像和文本对齐在一起

Question

我试图在左侧带有图标的 div 中显示消息。

预期结果是图标应始终与文本相邻，并且它们需要在 div 的底部中心对齐。

我正在使用 :after 伪元素。保持图标的 position: absolute 没有帮助，因为这需要手动调整图标相对于文本的位置。

这是 CSS。

.parent{
    font-weight: 500;
    height: 65px;
    text-align: center;
    padding: 15px 0 10px;
    margin: auto;
    display: block;
    width: 80%;
    font-size: 12px;
    overflow: hidden;
    position: relative;
}

.parent > div {
    float: none;
    /* display: table-cell; */
    vertical-align: middle;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.msg:after {
    content: '';
    background: url(data:image/...);
    height: 16px;
    width: 16px;
    display: block;
    position: absolute;
    top: 0;
    padding-right: 5px;
    left: 108px;
}

和标记:

<div class="parent">
    <div class="msg">text goes here</div>
</div>

Answer 1

Flexbox 可以做到这一点:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.parent {
  font-weight: 500;
  margin: auto;
  padding: 1em;
  width: 80%;
  font-size: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid red;
}

.msg {
  display: flex;
}

.msg p {
  padding-left: 1em;
}

.msg:before {
  content: "";
  height: 16px;
  flex: 0 0 16px;
  background: red;
  border-radius: 100%;
}

<div class="parent">
  <div class="msg">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae numquam unde, eum sequi expedita fugiat ipsa exercitationem nesciunt libero repellendus aperiam excepturi, dolorem repudiandae eveniet alias perspiciatis, vero veniam tempora natus magnam
      itaque quos. Nemo sit nisi, veniam mollitia fugit eaque reiciendis ex doloribus rem et suscipit debitis commodi sapiente.</p>
  </div>
</div>