Question

我希望红色背景的div根据浏览器宽度调整大小，同时保持其宽高比为16：9但不超过300px的高度。我还希望div中写的文本在中心对齐;垂直和水平。通过以下CSS代码，div根据宽高比调整大小，文本水平对齐。但div并没有将其高度限制在300px，文本也没有垂直对齐。

ArrayList<Integer> list = new ArrayList<Integer>();
list.add(2);
System.out.print(list.get(0));

.container {
  background-color: red;
  position: relative;
  width: 100%;
  max-height: 300px;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  display: table;
}

.text {
  display: table-cell;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
  color: white;
}

Answer 1

检查摘录。

.container {
  background-color: red;
  position: relative;
  width: 100%;
  max-height: 300px;
  height: 500px;
  /*padding-top: 56.25%;*/
  /* 16:9 Aspect Ratio */
  display: table;
}

.text {
  display: table-cell;
  /*position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;*/
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
  color: white;
  height: 100%;
  width: 100%;
}

<h2>Maintain Aspect Ratio 16:9</h2>

<div class="container">
  <div class="text">This is some text...</div>
</div>

Div保持其纵横比并且不超过一定高度。其中的文本应垂直和水平居中

1 个答案: