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

【问题标题】：Horizontally centering text in a nested div that's set to justify在设置为对齐的嵌套 div 中水平居中文本
【发布时间】：2019-03-23 15:49:46
【问题描述】：

我正在尝试创建一个响应式网站（不使用 flex）。我需要在两个display: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

【问题讨论】：

我真的不明白你的目的。你能附上一张图片来展示你想要的吗？
您没有使用 flex 或任何其他显示属性是否有任何具体原因？我不明白为什么必须显示单元格：表格。
@AndyHoffman - 为你添加图片
@Jason 我不确定您所说的“其他显示属性”是什么意思。回答您关于不使用 flex 的问题： a) 我对它非常陌生，并且仍在学习 CSS 的更基本部分。 b) 我正在努力让尽可能多的人访问这个网站。我的理解是 Flex 是……也许不是最前沿的，但肯定不受旧浏览器的支持。不过我可能是错的 - 它经常发生 :) c) 我将它们设置为 display: table 以保持它们的大小相同，而不管内容如何。其他任何事情都会导致列不均匀...
您现在拥有的代码不会生成“这就是它在做什么”的屏幕截图。

标签： html css nested text-align

【解决方案1】：

如果你想用divs来模拟一个表格，那就一路用吧。

使用table-caption 作为表格标题
左右单元格是一个组，因此将两个单元格包围在table-row 中，并用table-row-group 包围table-row

.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>

【讨论】：

这在我的网站范围内工作得很好。我从 W3C 借来了响应式表格的东西，我猜它不完整？无论如何，非常感谢！

【解决方案2】：

如果您想要一个带有居中标题的表格，只需使用带有居中标题的表格即可。

.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>

或者如果你不想使用

元素，你可以使用use divs，但是你需要保持正确的表格结构：

.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>

【讨论】：

【解决方案3】：

虽然我认为有几个答案显然可行。我仍然认为您应该对使用 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 将被设置为宽度：50% 的 inline-block。这比做古老的桌子轮廓要干净得多。正如你所看到的，novelRight 上的额外内容也无关紧要。

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

【讨论】：