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

Answer 2

<强> CSS

.contents {
  padding-left: 200px;//hfhaunter
  padding-right: 200px;//hfhaunter
  margin: 0 auto;
  text-align: center;
  width: 100%;//thank you pablo cesar cordova morales
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  font-size: 18px;
}

在表格内水平对齐表格单元格

2 个答案: