动态集中嵌套vis

问题是我不能使用任何固定的宽度或高度。 我有一个文本框需要垂直和水平居中在一个有边框的框内。 我的文本框和边框之间应该有10px的边距。 接壤的盒子反过来应该水平居中。

基本上，不管我输入什么文本，我都需要div“copy-container”来相应地缩放其高度/宽度，同时仍然保持1）水平和垂直居中的文本2）水平居中的“复制容器”。

下面的代码实现了一切，除了文本不垂直对齐:(

.wrapper {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  bottom: 55px;
  height: 300px;
  background-color: #ecf0f1;
}

.copy-container {
  position: relative;
  display: table;
  height: auto;
  /*padding: 5px 10px 5px 10px;*/
  border: 1px solid black;
  margin: auto;
}

.copy-container p {
  position: relative;
  margin: 5px 5px 5px 5px;
}

<div class="body">
  <div class="wrapper">
    <div class="copy-container">
      <p>WHERE BROOKLYN AT <br> WHERE BROOKLYN AT <br> WHERE BROOKLYN AT</p>
      <div class="cta-container">
      </div>
    </div>
  </div>
</div>

---

我通常使用垂直居中的相同技巧：将元素设置为position: absolute; ，然后从顶部和左侧向上滑动50％，然后将其翻译为顶部并将其左侧缩小一半：

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);

.wrapper {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  bottom: 55px;
  height: 300px;
  background-color: #ecf0f1;
}

.copy-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: table;
  height: auto;
  /*padding: 5px 10px 5px 10px;*/
  border: 1px solid black;
  margin: auto;
}

.copy-container p {
  position: relative;
  margin: 5px 5px 5px 5px;
}

<div class="body">
  <div class="wrapper">
    <div class="copy-container">
      <p>WHERE BROOKLYN AT <br> WHERE BROOKLYN AT <br> WHERE BROOKLYN AT</p>
      <div class="cta-container">
      </div>
    </div>
  </div>
</div>

链接地址: http://www.djcxy.com/p/13239.html

上一篇: Dynamically centered nested vis

下一篇: Textarea too large for page?