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