Centre CSS n'importe quel texte avec l'alignement gauche à l'intérieur div divisée taille

Question

Je connais beaucoup de méthodes pour centrer un contenu interne, mais aucun d'entre eux ne travaille avec du texte de taille personnalisée avec alignement à gauche.

Le résultat que je veux est http://joxi.ru/krDDq9duE6zL0r

ont essayé toutes les méthodes connues pour moi:

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

Voici le 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 Veuillez noter que le texte pourrait être d'une lettre à plusieurs lignes. Ainsi, la largeur du contenu interne est flexible.

Answer 1

J'ai également mis à jour le violon. J'ai changé: 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; 
} 

voir vivre ici: jsfiddle

Answer 2

Pouvez-vous ajouter width aux éléments enfants c.-à-.try1, .try2 et comme si oui, qui peut aligner l'élément enfant à center de parent div en utilisant CSS calc() function comme ci-dessous,

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

Vous pouvez même vérifier en utilisant flex.