Горизонтальное центрирование текста во вложенном элементе div, установленном для выравнивания - PullRequest
Новая
       23

Горизонтальное центрирование текста во вложенном элементе div, установленном для выравнивания

0 голосов
/ 23 марта 2019

Я пытаюсь создать адаптивный сайт (не используя flex).Мне нужно создать заголовок над двумя display:table ячейками, и я бы хотел, чтобы он был в центре.Основное число, в котором находится стол - text-align:justify.Ничто из того, что я делаю, не исправляет это!

Я перепробовал почти все, что смог найти по этому вопросу: text-align:center;

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

просто margin: 0 auto; и многочисленные комбинации вышеперечисленного,Текст упорно остается в правом углу.

1011 * 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;
}

Мои извинения, если это не так, я здесь новый.Спасибо за любую помощь!

РЕДАКТИРОВАТЬ Вот что он делает Что я хочу, чтобы он делал

Ответы [ 3 ]

0 голосов
/ 23 марта 2019

Если вы хотите использовать div s для имитации таблицы, то иди с ней до конца.

  • Используйте 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>
0 голосов
/ 23 марта 2019

Хотя есть пара ответов, которые, очевидно, сработают, я бы предположил.Я все еще думаю, что вы должны быть открыты для использования flex и обеспечения обратной совместимости с IE с помощью более простого CSS.

<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 будут установлены в inline-blockширины: 50%.Это намного чище, чем делать древние таблицы.И, как вы можете видеть, дополнительный контент на NoveRight тоже не имеет значения.

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

0 голосов
/ 23 марта 2019

Если вам нужен стол с центрированным заголовком, просто используйте стол с центрированным заголовком. 

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

Или, если вы предпочитаете не использовать

...