时间戳

首页 > 解决方案 > CSS - 无法在 div 内对齐图像和文本

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

问题描述

我正在尝试在左侧带有图标的 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>

标签： htmlcss

解决方案

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>

推荐阅读