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

时间：2019-03-23 06:24:09

标签： html css nested text-align

我正在尝试创建一个响应式网站（不使用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

3 个答案:

答案 0 :(得分：0)

如果您要使用标题居中的表格，只需使用标题居中的表格即可。

.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 div，但是您需要保留适当的表结构：

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

答案 1 :(得分：0)

如果您想使用div来模拟表，则请一直使用它。

  • 使用table-caption作为表格标题
  • 左右两个单元格是一个组，因此将两个单元格都用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>

答案 2 :(得分：0)

尽管有一些答案显然可以满足我的要求。我仍然认为您应该开放使用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，并作为flex属性不起作用的IE的后备版本，将novelLeft和novelRight设置为宽度为50％的内联块。比起绘制古代桌子轮廓要干净得多。如您所见，novelRight上的额外内容也无关紧要。

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

相关问题
最新问题