主页 / coding / 问题 / 78302891
Accepted
alex
Asked: 2024-04-10 15:57:18 +0800 CST

将 div 垂直居中放置在另一个没有固定高度的 div 内

  • 772

在代码中，我尝试将语音气泡的尾部与图像的大致中心对齐，无论语音气泡的高度或图像的大小如何。理想情况下，我总是希望图像以包装器当前高度为中心，就像语音气泡的尾部以语音气泡本身的高度为中心一样。

然而，到目前为止，所有尝试似乎都没有奏效。我怎样才能实现这个目标？

我目前有以下代码：

@text: black;
@bkg: white;
@accent: rgba(75, 75, 75);

.wrapper {
    padding: 2rem 0;
}

.wrapper, .wrapper * {
    white-space: pre-line;
}

.bubble {
    background: gray;
    min-height: 225px;
    padding:10px; 
    max-height:auto; 
    width: 60%;
    border-radius: 10px;
    color: black; 
      position: relative;
    text-align:center;
    display: table;
    
}

.bubble:after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: gray;
    border-right: 0;
    border-bottom: 0;
    margin-top: -10px;
    margin-right: -20px;
}

.bubble span {
    display: table-cell;
    vertical-align: middle;
}

.image {
    min-height:10px;
    position: absolute;
    right: 0;
    width: 35%;
}

.image img {
    max-width: 100%;
}
<div class="wrapper">
  <div class="image">
    <img src="https://images.squidge.org/images/2024/04/09/biscuit_portrait.png" class="bbcode_image" loading="lazy">
  </div>
  <div class="bubble">
    <span style="font-size:10pt">
            elit enim in ex. Cras auctor lorem id lobortis feugiat. Maecenas egestas diam molestie ex tincidunt, eget tristique lectus sollicitudin. Aliquam quis risus facilisis nulla placerat ornare bibendum porta metus. Nulla placerat efficitur tincidunt. Nunc mattis neque non lectus interdum posuere. Curabitur id neque congue nibh condimentum molestie nec et mauris. Vivamus sed quam vitae leo varius sollicitudin et eget metus. Cras vestibulum ultrices viverra. Fusce accumsan scelerisque sapien, id pharetra massa sagittis eu. Nulla nec lectus accumsan, ultricies purus sagittis, consectetur lorem. Nam suscipit diam ac mauris ultricies rutrum. Sed auctor, augue eu porttitor suscipit, urna leo blandit ante, ac commodo ante augue ac odio. Vestibulum faucibus imperdiet purus, id gravida nisl rhoncus vitae. Etiam rhoncus dictum sem, nec imperdiet purus consectetur nec. Mauris sed mi scelerisque, consectetur quam a, malesuada orci.elit enim in ex. Cras auctor lorem id lobortis feugiat. Maecenas egestas diam molestie ex tincidunt, eget tristique lectus sollicitudin. Aliquam quis risus facilisis nulla placerat ornare bibendum porta metus. Nulla placerat efficitur tincidunt. Nunc mattis neque non lectus interdum posuere. Curabitur id neque congue nibh condimentum molestie nec et mauris. Vivamus sed quam vitae leo varius sollicitudin et eget metus. Cras vestibulum ultrices viverra. Fusce accumsan scelerisque sapien, id pharetra massa sagittis eu. Nulla nec lectus accumsan, ultricies purus sagittis, consectetur lorem. Nam suscipit diam ac mauris ultricies rutrum. Sed auctor, augue eu porttitor suscipit, urna leo blandit ante, ac commodo ante augue ac odio. Vestibulum faucibus imperdiet purus, id gravida nisl rhoncus vitae. Etiam rhoncus dictum sem, nec imperdiet purus consectetur nec. Mauris sed mi scelerisque, consectetur quam a, malesuada orci.

Nunc arcu justo, tincidunt sit amet augue et, consectetur vehicula enim. In hac habitasse platea dictumst. Cras sed posuere metus. Cras feugiat, ex sit amet pretium vestibulum, neque quam fringilla augue, sed efficitur ligula quam non diam. Phasellus pellentesque euismod nunc sed mollis. Sed faucibus leo non eros bibendum, cursus gravida lacus scelerisque. Vivamus at congue felis, vitae aliquet leo. Duis at orci sed arcu condimentum suscipit. Vestibulum laoreet enim id metus ultrices aliquet eget a nunc. 
    </span>
  </div>
</div>

html

1 个回答

  1. Best Answer

    如果位置绝对并且没有固定大小，则无法完成。我想到的最佳选择是在包装器上使用display: flex和align-items: center并反转 HTML 上图像和气泡的顺序，或者也在包装器上使用flex-direction: row-reverse 。

    @text: black;
@bkg: white;
@accent: rgba(75, 75, 75);

.wrapper {
    padding: 2rem 0;
    display: flex;
    align-items: center
}

.wrapper, .wrapper * {
    white-space: pre-line;
}

.bubble {
    background: gray;
    min-height: 225px;
    padding:10px; 
    width: 60%;
    border-radius: 10px;
    color: black; 
    position: relative;
    display: flex;
    align-items: center;
}

.bubble:after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: gray;
    border-right: 0;
    border-bottom: 0;
    margin-top: -10px;
    margin-right: -20px;
}

.bubble p {
    font-size: .625rem;
    margin: 0;
}

.image {
    min-height:10px;
    right: 0;
    width: 35%;
}

.image img {
    max-width: 100%;
}
    <div class="wrapper">

  <div class="bubble">
    <p>
            elit enim in ex. Cras auctor lorem id lobortis feugiat. Maecenas egestas diam molestie ex tincidunt, eget tristique lectus sollicitudin. Aliquam quis risus facilisis nulla placerat ornare bibendum porta metus. Nulla placerat efficitur tincidunt. Nunc mattis neque non lectus interdum posuere. Curabitur id neque congue nibh condimentum molestie nec et mauris. Vivamus sed quam vitae leo varius sollicitudin et eget metus. Cras vestibulum ultrices viverra. Fusce accumsan scelerisque sapien, id pharetra massa sagittis eu. Nulla nec lectus accumsan, ultricies purus sagittis, consectetur lorem. Nam suscipit diam ac mauris ultricies rutrum. Sed auctor, augue eu porttitor suscipit, urna leo blandit ante, ac commodo ante augue ac odio. Vestibulum faucibus imperdiet purus, id gravida nisl rhoncus vitae. Etiam rhoncus dictum sem, nec imperdiet purus consectetur nec. Mauris sed mi scelerisque, consectetur quam a, malesuada orci.elit enim in ex. Cras auctor lorem id lobortis feugiat. Maecenas egestas diam molestie ex tincidunt, eget tristique lectus sollicitudin. Aliquam quis risus facilisis nulla placerat ornare bibendum porta metus. Nulla placerat efficitur tincidunt. Nunc mattis neque non lectus interdum posuere. Curabitur id neque congue nibh condimentum molestie nec et mauris. Vivamus sed quam vitae leo varius sollicitudin et eget metus. Cras vestibulum ultrices viverra. Fusce accumsan scelerisque sapien, id pharetra massa sagittis eu. Nulla nec lectus accumsan, ultricies purus sagittis, consectetur lorem. Nam suscipit diam ac mauris ultricies rutrum. Sed auctor, augue eu porttitor suscipit, urna leo blandit ante, ac commodo ante augue ac odio. Vestibulum faucibus imperdiet purus, id gravida nisl rhoncus vitae. Etiam rhoncus dictum sem, nec imperdiet purus consectetur nec. Mauris sed mi scelerisque, consectetur quam a, malesuada orci.

Nunc arcu justo, tincidunt sit amet augue et, consectetur vehicula enim. In hac habitasse platea dictumst. Cras sed posuere metus. Cras feugiat, ex sit amet pretium vestibulum, neque quam fringilla augue, sed efficitur ligula quam non diam. Phasellus pellentesque euismod nunc sed mollis. Sed faucibus leo non eros bibendum, cursus gravida lacus scelerisque. Vivamus at congue felis, vitae aliquet leo. Duis at orci sed arcu condimentum suscipit. Vestibulum laoreet enim id metus ultrices aliquet eget a nunc. 
    </p>
  </div>
    <div class="image">
    <img src="https://images.squidge.org/images/2024/04/09/biscuit_portrait.png" class="bbcode_image" loading="lazy">
  </div>
</div>

    另外，我做了一些编辑，以使其更简单。我推荐Flexbox 和 Grid，并避免使用display: table和相关属性，因为它们完全有效并且仍然有其用途，Flexbox 和 Grid 由于其灵活性、效率和易用性而更适合现代网页设计中的一般布局目的。

    • 1

相关问题