CSS center any text with left alignment inside fixed size div

Question

I know a lot of methods to center an inner content but neither of them are working with custom size text with left alignment.

The result I want is http://joxi.ru/krDDq9duE6zL0r

Have tried all the known for me methods:

// 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;
}

Here's the code:

.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 Please notice, that the text could be any from one letter to multiple rows. So the inner content width is flexible.

https://stackoverflow.com/questions/21199057/force-single-line-of-text-in-element-to-fill-width-with-css — Morpheus, Jul 12 '17 at 08:31
@Morpheus Tried to set justify on wrapper and content in the first case. The width of inner block doesn't expand. — Dzmitry Vasilevsky, Jul 12 '17 at 09:44
@Morpheus This gap is definitely not a production behavior or the result I want http://joxi.ru/52aYnQoT4nqkN2 — Dzmitry Vasilevsky, Jul 12 '17 at 11:12

score 1 · Answer 1 · answered Jul 12 '17 at 09:03

1

Can you add width to child elements i.e to .try1, .try2 and such if so then that can align child element to center of parent div using CSS calc() function as below,

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

You can even check this using flex.

answered Jul 12 '17 at 09:03

frnt

8,455
2
22
25

1

Nice Suggestion 1 up from my side. – always-a-learner Jul 12 '17 at 09:14
@frnt No, I can't. The width of inner content is flexible because it can contain any text. http://joxi.ru/L21bWjMS8JykpA – Dzmitry Vasilevsky Jul 12 '17 at 09:21
@frnt, the flex approach you provided not working either https://jsfiddle.net/only_dimon/se4p5c9h/1/ – Dzmitry Vasilevsky Jul 12 '17 at 09:28
@DzmitryVasilevsky Okay so you can't add width then remove that and change it's display to inline-block, as in this jsfiddle https://jsfiddle.net/h75efskg/, https://jsfiddle.net/h75efskg/1/ – frnt Jul 12 '17 at 09:58
@frnt The problem remains. The width of the container also is flexible. The container can be any width, the text can be any size. The problem is that wrapping text takes more space then it is http://joxi.ru/Vm67abphDk8v02 See the updated fiddle. https://jsfiddle.net/only_dimon/vwupq976/ – Dzmitry Vasilevsky Jul 12 '17 at 11:09
@DzmitryVasilevsky Now even to fill that white-space which occurs when parent width increase then you have to include word-break:break-all; in .try1 which will break your text formation at many points. – frnt Jul 12 '17 at 11:44
@frnt word-break isn't acceptable here. I thought maybe some flexbox magic can be used to center any text inside any container. But not I nor my collegues can find a solution. – Dzmitry Vasilevsky Jul 12 '17 at 13:29

always-a-learner · Answer 2 · 2017-07-12T08:25:53.900

0

I have updated the fiddle also. I have changed: 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;
}

See it live here: jsfiddle

edited Jul 12 '17 at 08:25

answered Jul 12 '17 at 08:20

always-a-learner

3,671
10
41
81

1. You have changed the position to fixed which isn't suitable to most of cases. 2. You just changed horizontal padding but this doesn't solve the issue. I need 20px padding, the width of wrapper can be flexible, and the text can by other. – Dzmitry Vasilevsky Jul 12 '17 at 08:41

CSS center any text with left alignment inside fixed size div

2 Answers2