rahul rahul - 5 months ago 9
CSS Question

How to place two horizontal lines one by one with different sizes aligned centered in same div?

How can i align the two different sizes lines one by one horizontally with no space between them?

Like
See here i want no space between the lines means the APP downloads exactly after 5M

I tried with the following:



.text
{
color:white;
}
.big
{
font-size:5em;
}
.small
{
font-size:2em;
display:inline-block;
}

<div class="text">
<span class="big">52M</span>
<span class="small">App Downloads</span>
</div>




Answer

Maybe you could use 'flex-box' and change the 'line-height' value of the span elements. It's a possible solution.

Example

.text
{
  width:20%;
  height:20%;
  padding:5%;
  background:red;
  color:white;
  display:flex;
  flex-direction:column;
}
.big
{
  font-size:5em;
  line-height:0.8em;
  margin:auto;
}
.small
{
  font-size:2em;
  margin:auto;
}