Question

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

基本上，无论我输入什么文字，我都需要div＆＃34; copy-container＆＃34;在保持的同时相应地调整其高度/宽度 1）水平和垂直居中的文本 2）水平居中＆＃34;复制容器＆＃34;。

我下面的代码实现了除文本没有垂直对齐之外的所有内容：（

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我通常使用相同的技巧进行垂直居中：将元素设置为position: absolute;，然后从顶部和左侧将其向下滑动50％，并将其转换为顶部和左侧的一半大小：< / p>

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

动态居中的嵌套vis

1 个答案: