CSS центрирует любой текст с выравниванием по левому краю внутри div фиксированного размера

Я знаю много методов центрирования внутреннего содержимого, но ни один из них не работает с текстом нестандартного размера с выравниванием по левому краю.

Мне нужен результат http://joxi.ru/krDDq9duE6zL0r.

Перепробовал все известные мне способы:

// first attempt
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// second attempt
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

// third attempt
.wrapper {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

// forth attempt
.wrapper:after {
  content:'';
  display: inline-block;
  vertical-align: middle;
  height: 74px;
}

Вот код:

.wrapper,
.wrapper2,
.wrapper3,
.wrapper4 {
  position: relative;
  box-sizing: border-box;
  width: 225px;
  height: 74px;
  padding: 0 20px;
  margin: 5px 0;
  background: yellow;
}

.try1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.try2 {
  position: relative;
  float: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrapper2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper3 {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.try4 {
  display: inline-block;
  text-align: left;
}

.wrapper4 {
  position: relative;
  white-space: nowrap;
}

.wrapper4:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 74px;
}

.try5 {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}
<p>Tries:</p>
<div class="wrapper">
  <div class="try1">DUE DILIGENCE EXPIRATION</div>
</div>
<div class="wrapper">
  <div class="try2">DUE DILIGENCE EXPIRATION</div>
</div>
<div class="wrapper2">
  <div class="try3">DUE DILIGENCE EXPIRATION</div>
</div>
<div class="wrapper3">
  <div class="try4">DUE DILIGENCE EXPIRATION</div>
</div>
<div class="wrapper4">
  <div class="try5">DUE DILIGENCE EXPIRATION</div>
</div>

<p>I want:</p>
<div class="wrapper">
  <div class="try1">DUE&nbsp;DILIGENCE EXPIRATION</div>
</div>

UPD Обратите внимание, что текст может быть любым от одной буквы до нескольких строк. Таким образом, внутренняя ширина содержимого является гибкой.


vertical-alignment css flexbox center
person Dzmitry Vasilevsky    schedule 12.07.2017    source источник
comment
stackoverflow.com/questions/21199057/   -  person Morpheus    schedule 12.07.2017
comment
@Morpheus Пытался установить выравнивание по оболочке и содержимому в первом случае. Ширина внутреннего блока не увеличивается.   -  person Dzmitry Vasilevsky    schedule 12.07.2017
comment
jsfiddle.net/vm8v2bx5   -  person Morpheus    schedule 12.07.2017
comment
@Morpheus Этот разрыв определенно не производственное поведение или результат, которого я хочу joxi.ru/52aYnQoT4nqkN2   -  person Dzmitry Vasilevsky    schedule 12.07.2017

Ответы (2)


arrow_upward
1
arrow_downward

Можете ли вы добавить width к дочерним элементам, то есть к .try1, .try2 и т. д., если да, то это может выровнять дочерний элемент с center из parent div, используя CSS calc() function, как показано ниже,

.wrapper {
  width: 225px;
  height: 74px;
  padding: 0 20px;
  background: yellow;
  position: relative;
}

.wrapper > .try1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(225px - 96px);
}
<div class="wrapper">
  <div class="try1">DUE DILIGENCE EXPIRATION</div>
</div>

Вы даже можете проверить это с помощью flex.

person frnt    schedule 12.07.2017
comment
Хорошее предложение 1 с моей стороны. - person ankit suthar; 12.07.2017
comment
@frnt Нет, я не могу. Ширина внутреннего содержимого является гибкой, поскольку она может содержать любой текст. joxi.ru/L21bWjMS8JykpA - person Dzmitry Vasilevsky; 12.07.2017
comment
@frnt, гибкий подход, который вы предоставили, также не работает jsfiddle.net/only_dimon/se4p5c9h/1 - person Dzmitry Vasilevsky; 12.07.2017
comment
@DzmitryVasilevsky Хорошо, поэтому вы не можете добавить ширину, а затем удалить ее и изменить ее отображение на встроенный блок, как в этом jsfiddle jsfiddle .net/h75efskg, jsfiddle.net/h75efskg/1 - person frnt; 12.07.2017
comment
@frnt Проблема остается. Ширина контейнера также является гибкой. Контейнер может быть любой ширины, текст может быть любого размера. Проблема в том, что обтекающий текст занимает больше места, чем joxi.ru/Vm67abphDk8v02 См. обновленную скрипту. jsfiddle.net/only_dimon/vwupq976 - person Dzmitry Vasilevsky; 12.07.2017
comment
@DzmitryVasilevsky Теперь даже для заполнения этого пробела, который возникает при увеличении ширины родителя, вам нужно включить word-break:break-all; в .try1, что нарушит формирование вашего текста во многих точках. - person frnt; 12.07.2017
comment
Разрыв слова @frnt здесь неприемлем. Я подумал, может быть, можно использовать магию flexbox для центрирования любого текста внутри любого контейнера. Но ни я, ни мои коллеги не можем найти решение. - person Dzmitry Vasilevsky; 12.07.2017

arrow_upward
0
arrow_downward

Я также обновил скрипку. Я изменил: position: fixed; padding:padding: 0 51px;

.wrapper4 {
  position: fixed;  
  box-sizing: border-box;
  width: 225px;
  height: 74px;
  padding: 0 51px;
  margin: 5px 0;
  background: yellow;
}

Смотрите его здесь: jsfiddle

person ankit suthar    schedule 12.07.2017
comment
1. Вы изменили положение на фиксированное, что в большинстве случаев не подходит. 2. Вы только что изменили горизонтальный отступ, но это не решает проблему. Мне нужен отступ 20px, ширина обертки может быть гибкой, а текст может быть другим. - person Dzmitry Vasilevsky; 12.07.2017