Question

我的父div是position：absolute。其中的容器具有垂直居中的文本。这跨越父div的整个宽度。

然而，当我将一个容器div围绕垂直居中的文本设置为父div的50％时，它忽略了这个并继续跨越顶级父div的100％。

我已经尝试将新容器设置为相对定位，但这只会迫使它消失。将div .quote-center的宽度改为50％似乎可以达到正确的宽度，但这并不合适，因为当布局响应变化时，我不能按照我的意愿操作每个盒子。

＆＃13;

.brick {
  position: absolute;
}
.size42-insta {
  width: 640px;
  height: 320px;
}
.red {
  background-color: #da4a44;
}
.instagram {} .instagram-image {
  width: 50%;
}
img {
  width: 100%;
}
.instagram-quote {
  width: 50%;
}
.quote-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  z-index: 100;
}
.quote-center {
  display: table;
  width: 100%;
  height: 100%;
}
.quote-vcenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-family: 'Source Sans Pro', sans-serif;
}
.quote {
  width: 90%;
  margin: 0 auto;
  font-family: "omnes-pro", sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.6em;
}

＆＃13;

<div class="brick size42-insta red">
  <div class="instagram">
    <div class="instagram-image">
      <img src="http://i.imgur.com/87F6Nvc.png" />
    </div>
    <div class="instagram-quote">
      <div class="quote-content">
        <div class="quote-center">
          <span class="quote-vcenter">
                <div class="social-title">INSTAGRAM</div>
                <div class="twitter-tweet">“Sed bibendum malesuada sapien, vestibulum porta tortor ultrices"
                </div>
                <div class="twitter-date">19 hours ago
                </div>
                <div class="icon-stream twitter-stream"><a href="http://twitter.com/">a</a></div>
              </span>
        </div>
      </div>
    </div>
  </div>

＆＃13;

Answer 1

我会完全简化和重新构建列，但为了解决您现在遇到的问题（在您的问题的评论中描述），您需要更改.quote-content的位置，并添加宽度值：

.quote-content {
  right:0;
  width:100%;
}

您还需要删除left:0。样式将是：

.quote-content {
  position:absolute;
  top:0;
  right:0;
  width:50%;
  overflow:hidden;
  z-index:100;
}

编辑：

要垂直对齐绝对定位的div（使用现在的内容），您可以使用自动边距，只要您定义顶部，右侧，底部和左侧值：

.quote-content {
  position:absolute;
  top:0;
  right:0;
  left:0;
  margin:auto 0 auto auto;
  width:50%;
  overflow:hidden;
  z-index:100;
  bottom:0;
}

JSFiddle

JSfiddle code

Answer 2

在.quote-content上添加50％的宽度并删除左边：0; 如果你想要宽度更小，记得向右添加：0; 因此，如果您将其宽度设为40％，则需要向右侧添加5％

40％加上5％右边是45％，剩下5％，左边再加50％。

.quote-content{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5%;
  overflow: hidden;
  z-index: 100;
  width: 40%;
}

http://codepen.io/anon/pen/GgMPqr

绝对div在父被指定的相对位置上移动

2 个答案: