html - 水平对齐表格内的表格单元格

Question

如何水平对齐此表格单元格中的文本？看起来它向右浮动，我不确定为什么。 https://jsfiddle.net/o06e11o9/

HTML

<div class="affil2">
  <div class="oval2"></div>
  <div class="contents">
    a lorem ipsum dolor sit amet. Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, tempor a tortor.
    <br />
    <br /> Pellentesque non dignissim neque. Ut porta viverra est, ut dignissim elit elementum ut.
  </div>
</div>

CSS

.affil2 {
  align-content: center;
  display: table;
  text-align: center;
  z-index: 20;
  border: 1px solid #705A1D;
  position: relative;
  height: 200px;
  width: 960px;
  background-color: #af9254;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, .35);
}

.contents {
  margin: 0 auto;
  text-align: left;
  width: 600px;
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  font-size: 18px;
}

.oval2 {
  z-index: 1;
  position: absolute;
  top: -110px;
  width: 1200px;
  height: 250px;
  border-radius: 100%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.3) 0%, rgba(255, 0, 0, 0) 100%);
}

Answer 1

你的代码中有很多奇怪的东西，但是你可以改变你的解决方案:

width: 100%; 和 text-align: center; 类 contents

.contents {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  font-size: 18px;
}

JsFiddle Link