How to make a text with specified width and height be in center?

Question

How can i make a text with specified width and height be in center? Not just horizontal.

Example: h1 {width: 200px; height: 36px; text-align:center;}

but it give me something like this.

EDIT: I figure it out.

line-height: 10px

Can you post code for what you have tried so far and where are you stuck? — Yadab, Mar 26 '21 at 00:32
Or perhaps have a look at this answer on vertical alignment in a div https://stackoverflow.com/a/2939979/15310387 — Mr R, Mar 26 '21 at 00:34

score 0 · Accepted Answer · answered Mar 26 '21 at 00:39

You should be able to fix it though top & bottom padding

p{
   width: 200px;
   padding: 8px;
  height: 16px;
  border: 2px solid rgba(69, 65, 62, 0.5);
  border-radius: 20px;
  text-align: center;
  margin: auto 0;
}

<p>$0.00 — $100.00 <i class="fas fa-caret-down"></i></p>

score 0 · Answer 2 · answered Mar 26 '21 at 00:39

You can do something like this. Just remove text-align and use flex for dispalying item.

p{
   width: 200px;
  height: 36px;
  border: 2px solid rgba(69, 65, 62, 0.5);
  border-radius: 20px;
  margin: auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

<p>$0.00 — $100.00 <i class="fas fa-caret-down"></i></p>

How to make a text with specified width and height be in center?

2 Answers2