在设置为对齐的嵌套 div 中水平居中文本

Horizontally centering text in a nested div that's set to justify

我正在尝试创建一个响应式网站（不使用 flex）。我需要在两个 display:table 单元格上创建一个标题，并且我希望它居中。持有table的主要div是text-align:justify。我似乎无能为力！

我已经尝试了几乎所有我能找到的关于这个主题的东西： text-align:center;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;

很普通margin: 0 auto; 以及上述的众多组合。文字固执地留在右角。

HTML

<div class="row">
  <div class="novel novelleft">
    <div class="noveltitle">TITLE</div>
      stuff
  </div>
  <div class="novel novelright">
      more stuff
  </div>
</div>

CSS

.novel {
  display: table;
  width: 100%;
  padding: 10px;
  text-align: justify;
  text-align-last:left;
  background-color: #fff;
}
.novelleft {
  width: 40%;
  display: table-cell;
  vertical-align: top;
  padding-left: 13%;
  background-color: #fff;
}
.novelright {
  width: 60%;
  display: table-cell;
  vertical-align: middle;
  padding-right: 13%;
  background-color: #fff;
}

.noveltitle {
  font-family: 'Cinzel', serif;
  text-align: center;
}

很抱歉，如果这不对，我是新来的。感谢您的帮助！

编辑 Here's what it's doing What I want it to do

如果您想要带有居中标题的 table，只需使用带有居中标题的 table。

.novel {
  width: 100%;
  padding: 10px;
  background-color: #fff;
}
.novelleft {
  width: 40%;
  vertical-align: top;
  padding-left: 13%;
  background-color: #fff;
}
.novelright {
  width: 60%;
  vertical-align: middle;
  padding-right: 13%;
  background-color: #fff;
}

.noveltitle {
  font-family: 'Cinzel', serif;
  text-align: center;
}

<table class="novel">
 <caption class="noveltitle">TITLE</caption>
 <tr>
  <td class="novelleft">stuff</td>
  <td class="novelright">more stuff</td>
 </tr>
</table>

或者如果你不想使用

元素，你可以使用 div，但你需要保持正确的 table 结构：

.novel {
  display: table;
  width: 100%;
  padding: 10px;
  background-color: #fff;
}
.novelrow {
  display: table-row;
}
.novelleft {
  display: table-cell;
  width: 40%;
  vertical-align: top;
  padding-left: 13%;
  background-color: #fff;
}
.novelright {
  display: table-cell;
  width: 60%;
  vertical-align: middle;
  padding-right: 13%;
  background-color: #fff;
}

.noveltitle {
  display: table-caption;
  font-family: 'Cinzel', serif;
  text-align: center;
}

<div class="novel">
 <div class="noveltitle">TITLE</div>
 <div class="novelrow">
  <div class="novelleft">stuff</div>
  <div class="novelright">more stuff</div>
 </div>
</div>

如果你想用divs来模拟一个table，那么就用它吧。

  • 使用 table-caption 作为您 table 的标题
  • 左边和右边的单元格是一组，所以用 table-row 和 table-row 用 table-row-group
    • 包围两个单元格 

.novel {
  display: table;
  width: 100%;
}

.novel-caption {
  display: table-caption;  
  caption-side: top; 
  text-align: center; 
  font-family: 'Cinzel', serif;  
}

.novel-row-group {
  display: table-row-group;
}

.novel-row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 15px;
}

.novel-row-group {
  display: table-row-group;
}

.novelleft {
  background-color: #bfbfbf;
  width: 50%;
}

.novelright {
  background-color: #404040;
  color: #fff;
}

* {
  box-sizing: border-box;
}

<div class="novel">
  <div class="novel-caption">
    TITLE
  </div>
  <div class="novel-row-group">
    <div class="novel-row">
      <div class="novelleft cell">stuff</div>
      <div class="novelright cell">more stuff</div>
    </div>
  </div>
</div>

尽管我假设有几个答案显然有效。我仍然认为您应该对使用 flex 持开放态度，然后使用更简单的 CSS 向 IE 提供向后兼容性。 

<div class="container">
  <div class="title">
    Centered Title Goal
  </div>
  <div class="items">
    <div class="novel">
      .novelLeft
    </div>
    <div class="novel">
      .novelRight
      <div>
      .novelRight
      </div>
    </div>
  </div>
</div>

CSS - 

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  border: solid 1px black;
}

.title {
  width: 100%;
  text-align: center;
}

.items {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.novel {
  flex: 1;
  display: inline-block;
  width: 50%;
}
.novel:nth-child(1){
  background:#404040;
}
.novel:nth-child(2){
  background: #bfbfbf;
}

这将创建一个 flexbox 并作为 IE 的回退，其中 flex 属性 不起作用，novelLeft 和 novelRight 将被设置为 width:50% 的内联块。它比做古老的 table 大纲要干净得多。正如您所见，novelRight 上的额外内容也无关紧要。

https://jsfiddle.net/4q6f9zy7/3/