Question

我有以下代码用于垂直div

CSS

.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
border-radius: 25px;

}

HTML

<div class="container">
  random text 
    </p>
  random text
  random text 
    </p>
  random text
  random text 
    </p>
  random text
</div>

我无法弄清楚在这个div中如何将文本垂直对齐并做出响应？

jsfiddle代码：https://jsfiddle.net/h49xx972/

Answer 1

尝试以下方法 - 这在codepen上适用于我。我添加了一个以文本为中心的CSS ID（我假设垂直和水平都是你的要求）

CSS

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    border-radius: 25px;
}

#text_container {
    position: relative;
  top: 50%;
  transform: translateY(-50%);

}

更新了HTML

<div class="container">
  <div id="text_container">
  random text 
    </p>
  random text
</div>
</div>

my codepen

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

THX

Answer 2

将文本换行到没有声明尺寸（fiddle）的另一个div中：

 <div class="container">
     <div class="text-container">
      random text 
        </p>
      random text
      random text 
        </p>
      random text
      random text 
        </p>
      random text
    </div>
</div>

这是css：

.container, .text-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.container {
    width: 60%;
    height: 60%;
    padding: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    border-radius: 25px;
}

.text-container {
    text-align: center;
}

垂直对齐响应div中的文本

2 个答案: