There is such code:

html:

<p class="hst">Шаблон</p>

css:

 .hst { height: 50px; text-align: center; border: 1px solid green; }

It turns out that the text is at the top of the frame, and the rest of the frame is empty. enter image description here

How to center the text vertically (without changing the code above)?

  • Add line-height: 50px - Ihor Tkachuk
  • I'm afraid to ask: what does it mean without changing the code above? - sivik_xes
  • those. delete nothing, but continue, add code - Ilnyr
  • If you are given an exhaustive answer, mark it as correct (click on the check mark next to the selected answer). - ߊߚߤߘ

2 answers 2

Use display: table-cell (enable centering) in conjunction with vertical-align: middle (perform centering):

 .hst { display: table-cell; vertical-align: middle; width: 400px; height: 40px; text-align: center; border: 3px solid green; border-radius: 30px; } 
 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" /> </head> <body> <p class="hst">Шаблон</p> </body> </html>

    Add line-height: 50px; - then the height of the line will be equal to the height of your block ( height: 50px; ) and the text will be centered:

     .hst { height: 50px; text-align: center; border: 1px solid green; line-height: 50px; } 
     <p class="hst">Шаблон</p>