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

ProgramBox

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

Post author:admin
Запись опубликована:9 мая, 2023
Post category:Вопросы по программированию

#html #css #nested #text-align

#HTML #css #вложенный #выравнивание текста

Вопрос:

Я пытаюсь создать адаптивный веб-сайт (не используя 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;
}

Приношу свои извинения, если это неправильно, я здесь новичок. Спасибо за любую помощь!

Редактировать Вот что он делает
Что я хочу, чтобы это делало

1. Я действительно не понимаю вашей цели. Можете ли вы включить изображение, чтобы показать, что вы хотите?

2. Есть ли какая-либо конкретная причина, по которой вы не используете flex или любые другие свойства отображения? Я не вижу смысла, почему ячейки должны быть display: table.

3. @AndyHoffman — добавил фотографии для вас

4. @Jason Я не уверен, что вы подразумеваете под «другими свойствами отображения». Отвечая на ваш вопрос о том, чтобы не использовать flex: а) Я очень плохо знаком с ним и все еще изучаю более базовые части CSS. б) Я пытаюсь сделать этот веб-сайт доступным для как можно большего числа людей. Я понимаю, что Flex … может быть, и не является передовым, но уж точно не поддерживается старыми браузерами. Хотя я могу ошибаться — это часто случается c) Я использую их как display: table , чтобы поддерживать их одинаковый размер независимо от содержимого. Все остальное приводит к неравномерным столбцам…

5. Имеющийся у вас код не выдает скриншот с надписью «Вот что он делает».

Ответ №1:

Если вы хотите использовать 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>

Ответ №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>

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

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