横向&在两个并排 50% 宽的列中垂直居中 2 个 div [英] Horizontally & Vertically centering 2 divs within two side by side 50% width columns

问题描述

让 2 个 div 水平居中时遇到一些麻烦 &垂直在它们各自的父级内，它们并排，宽度为 50%，高度为 100%.

这是我所拥有的(为了方便使用 Codepen).

Codepen 链接

*** HTML ***<div class="parent"><div class="left"><div class="信息"><h1>这个 div 应该居中 <br>在左边 50%</h1><h2>取得联系:</h2><h1>[phone]
[phone]
[e-mail]

<div class="right"><div class="img-wrapper"><img src="http://placehold.it/210x210/FE5000/FFF"/>

</div*** CSS ***.父母{高度:100%；宽度:100%；}.parent:before, .parent:after {显示:表；内容: " ";}.父母:在{之后清楚:两者；}.左右 {向左飘浮;高度:100%；宽度:50%；}.信息{宽度:400px；高度:280px；顶部:0；右:0；底部:0；左:0；保证金:自动；}.right .img-wrapper {宽度:210px；高度:210px；顶部:0；右:0；底部:0；左:0；边距:0 自动；}

解决方案

我试过了.我不确定这是否是您要找的.我添加了 display: flex;到 .left 和 .right 类.

.parent {高度:100%；宽度:100%；}.左右 {向左飘浮;高度:500px；宽度:50%；显示:弹性；}.信息{宽度:400px；高度:280px；顶部:0；右:0；底部:0；左:0；保证金:自动；}

Having some trouble getting 2 divs to center horizontally & vertically within their respective parents which are side by side with 50% width and 100% height.

Here's what I've got (Codepen for ease).

Codepen Link

*** HTML ***
<div class="parent">
  <div class="left">
    <div class="info">
      <h1>This div should be centered <br>within the left 50%</h1>
      <h2>Get in touch:</h2>
      <h1>
        [phone]<br>
        [phone]<br>
        [e-mail]<br>
      </h1>
    </div>
  </div>

  <div class="right">
    <div class="img-wrapper">
      <img src="http://placehold.it/210x210/FE5000/FFF"/>
    </div>
  </div>
</div

*** CSS ***
.parent {
  height: 100%;
  width: 100%;
}

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

.parent:after {
  clear: both;
}

.left, .right {
  float: left;
  height: 100%;
  width: 50%;
}

.info {
  width: 400px;
  height: 280px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.right .img-wrapper {
  width: 210px;
  height: 210px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
}

解决方案

I tried this. I'm not sure if this is what you are looking for. I added display: flex; to the .left and .right classes.

.parent {
    height: 100%;
    width: 100%;
}

.left, .right {
    float: left;
    height: 500px;
    width: 50%;
    display: flex;
}

.info {
    width: 400px;
    height: 280px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

这篇关于横向&在两个并排 50% 宽的列中垂直居中 2 个 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！