0

I have two different paragraph tags, each with a different size. The problem is that I want the two texts to move to the center of the text line, so they appear even. Below is my current code, and images of desired results. Note that these are separate tags, using display: inline to make the appear next to each other.

Example of current code

.big {
  font-size: 42px;
  display: inline;
}

.small {
  font-size: 12px;
  display: inline;
}
<p class="big">Test</p>
<p class="small">Test</p>

Desired Result
Desired result image

Current Result
enter image description here

Zach P.
  • 342
  • 1
  • 10
  • 1
    you can create a parent div and set its height equal to line heigt of .small https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block – Lovesh Dongre Jun 28 '20 at 01:27
  • You can wrap your `p` elements in a `div` and use Flexbox's `align-items: center` to vertically center the text. Here are some resources: https://stackoverflow.com/a/13515693/11715889 and https://stackoverflow.com/a/31078418/11715889. – khan Jun 28 '20 at 02:01

3 Answers3

3

Wrap it in a container element and give vertical-align: middle; like this

.container p {
  display: inline;
  vertical-align: middle;
}

.big {
  font-size: 42px;
}

.small {
  font-size: 12px;
}
<div class="container">
  <p class="big">Test</p>
  <p class="small">Test</p>
</div>
naveen
  • 53,448
  • 46
  • 161
  • 251
  • we could use flexbox also to achieve the same thing, just putting it out there for to explore more about flexbox. It's really awesome in laying out elements the way you want. – anand Jun 28 '20 at 03:04
0
.big {
   font-size: 42px;
   display: inline;
 }

.small {
      font-size: 12px;
      display: inline;
      position: absolute;
      padding: 8px 8px;
     }

well while providing absolute positioning to the text of the .small class the position of the text moves to top

this might help you, also you can change the padding of according to the font-size

Abdul Majeed Ayub Inamdar
  • 1
  • 1
0

Set width to the text-box as you want. As I used display-block. You have to set display: inline-block to set the width of the text-box.





.text-box {
    display: block;
    text-align: center;
}
.big {
    font-size: 42px;
    display: inline;
}

.small {
    font-size: 12px;
    display: inline;
}


<div class="text-box">
    <p class="big">Test</p>
    <p class="small">Test</p>
</div>
Md Rashedul Islam
  • 71
  • 3
  • 12