Aligner le texte vertical du côté gauche

Question

J'ai une page web où je veux aligner mon texte verticalement du côté gauche qui sont actuellement alignés du côté droit.Voici mon code dans js fiddle: https://jsfiddle.net/r1uoyks6/ J'ai essayé plusieurs CSS propriété comme vertical-aligntext-alignfloat:clear. Mais n'a pas réussi à atteindre le résultat.J'ai dû <br/> pour positionner le <p> sous l'un l'autre. Essayé propriété display:inline-block mais sans succès.

.taker { 
 
    margin-top: 3em; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.teacher { 
 
    margin-left: 4.0em; 
 
    margin-top: 7em; 
 
    clear: left; 
 
    float: right; 
 
} 
 

 
.teacher_name { 
 
    margin-left: 4.0em; 
 
    margin-top: -1.5em; 
 
    vertical-align: middle; 
 
    float: right; 
 
    display: inline-block; 
 
}

<div class="taker"> 
 
    <p class="teacher">Submitted To,</p><br/> 
 
    <p style="vertical-align:right;" class="teacher_name">Dr. N M Golam Zakaria</p><br/> 
 
    <p style="vertical-align: right;" class="teacher_name">Professor</p><br/> 
 
    <p style="vertical-align: right;" class="teacher_name">BUET</p><br/> 
 
</div>

Answer 1

vous pouvez essayer ce code et toujours utiliser la propriété text-align.

.taker { 
 
    margin-top: 3em; 
 
    display: inline-block; 
 
} 
 

 
.teacher { 
 
    margin-left: 4.0em; 
 
    margin-top: 7em; 
 
    text-align: left; 
 
} 
 

 
.teacher_name { 
 
    margin-left: 4.0em; 
 
    margin-top: -1.5em; 
 
    text-align: left; 
 
    display: inline-block; 
 
    float:left; 
 
}

<div class="taker"> 
 
    <p class="teacher">Submitted To,</p><br/> 
 

 
    <p class="teacher_name">Dr. N M Golam Zakaria</p><br/> 
 
    <p class="teacher_name">Professor</p><br/> 
 
    <p class="teacher_name">BUET</p> 
 
</div>

Answer 2

La valeur right n'existe pas pour vertical-align en CSS. Peut-être que vous vouliez dire text-align? Sinon see MDN pour les valeurs autorisées de vertical-align.

J'ai supprimé toutes les règles flottantes, de positionnement et d'alignement de votre CSS, de sorte que le texte soit aligné (par défaut) à gauche. c'est ce que tu veux?

.taker { 
 
    margin-top: 3em; 
 
    display: inline-block; 
 
} 
 

 
.teacher { 
 
    margin-left: 4.0em; 
 
    margin-top: 7em; 
 
    vertical-align: middle; 
 
} 
 

 
.teacher_name { 
 
    margin-left: 4.0em; 
 
    margin-top: -1.5em; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
}

<div class="taker"> 
 
    <p class="teacher">Submitted To,</p> 
 
    <br/> 
 
    <p class="teacher_name">Dr. N M Golam Zakaria</p> 
 
    <br/> 
 
    <p class="teacher_name">Professor</p> 
 
    <br/> 
 
    <p class="teacher_name">BUET</p> 
 
    <br/> 
 
</div>