css - How to vertically align text when font is calculating height differently? -
i apologize in beforehand if duplicate can't seem find answer.
i made resembles progress bar. it's div p elements inside. can't seem center p elements vertically.
all did give parent div padding , logically text should in middle seems font counting height differently. , solution change line-height won't work. if change font verdana text aligned not preferred solution.
snippet:
div { width: 90%; background-color: green; text-align: left; padding: 1.2%; border-radius: 5px; height: 20px; font-family: 'hind guntur', sans-serif; } p { font-size: 90%; display: inline; margin: 0; color: white; }
<link href="https://fonts.googleapis.com/css?family=catamaran|hind+guntur" rel="stylesheet"> <div> <p>1</p> </div>
this should looking for. problem had fixed height
of 20px
on div
. if change value 28px
, text might vertical-align.
div { width: 90%; background-color: green; text-align: left; padding: 1.2%; border-radius: 5px; height: 28px; font-family: 'hind guntur', sans-serif; } p { font-size: 90%; display: inline; margin: 0; color: white; }
<link href="https://fonts.googleapis.com/css?family=catamaran|hind+guntur" rel="stylesheet"> <div> <p>1</p> </div>
Comments
Post a Comment