css 如何使用浮动元素垂直居中定位元素

wyyhbhjk 于 2023-01-22 发布在其他

关注(0)|答案(2)|浏览(153)

我已经得到了浮动图像和它的描述。
我希望divs中包含的描述被放置在垂直中心，并围绕图像流动。这是我的代码。

.parent {
  border: 1px red solid;
}

.parent:after, .parent:before {
  content: "";
  display: table;
  clear: both;
}

.left-child {
  width: 40vw;
  height: 40vw;
  border: 1px red solid;
  float: left;
}

<div class="parent">
  <div class="left-child"></div>
  <div clss="right-child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div clss="right-child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div clss="right-child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

有人能帮我解决这个问题吗？

css

来源：https://stackoverflow.com/questions/75157045/how-to-position-elements-center-vertically-with-float-element

2条答案

按热度按时间

xzabzqsa1#

我向你推荐Flex Box。
这里有一个很好的链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  border: 1px red solid;
  display: flex;
  align-items: center;
}

.left-child {
  width: 40vw;
  height: 40vw;
  border: 1px red solid;
}

<div class="parent">
  <div class="left-child"></div>
  <div class="right-child">
    Insert your centered stuff here
  </div>
</div>

赞(0）回复(0）举报 2023-01-22

v64noz0r2#

将parent display属性设置为table，将child设置为table-cell，则可以使用vertical-align属性将内容垂直居中对齐到其父级：

.parent {
  border: 1px red solid;
  display: table;
  overflow: hidden;
}

.parent:after, .parent:before {
  content: "";
  display: table;
  clear: both;
}

.left-child {
  width: 40vw;
  height: 40vw;
  border: 1px red solid;
  float: left;
}

.right-child {
  display: table-cell; vertical-align: middle;
}

<div class="parent">
  <div class="left-child"></div>
  <div class="right-child">
    <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>  
    <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
</div>

赞(0）回复(0）举报 2023-01-22

我来回答

css 如何使用浮动元素垂直居中定位元素

2条答案

相关问题

热门标签

最新问答