CODEWITHSUNDEEP
htmlcss
josef
josef

Reputation: 83

Text with different sizes on same line, how to align smaller text horizontally central with bigger text?

enter image description here

As demonstrated in the above image (please take no notice of the fact the Dasboard text is abhorrently large - I only made it that size for this example), I want the text that says "Admin Control Panel" to be aligned horizontally middle with where the Dashboard text is, online with the red arrow.

The code I have for both these pieces of text are:

<div id="content-breadcrumb">
  Admin Control Panel &raquo;
    <span id="active">
      Dashboard
    </span>
</div>

The CSS code is:

#content-breadcrumb {
  font-family: 'Varela Round', sans-serif
  font-size: 16px;
}

#content-breadcrumb #active {
  font-size: 200px;
  color: #4F95C4;
}

Note that I have tried using vertical align and setting line height to no avail. Thanks for any help that you can offer!

Upvotes: 3

Views: 2577

Answers (2)

Hubvill
Hubvill

Reputation: 504

If you dont want to use flex-box you can use vertical-align: middle;.

https://jsfiddle.net/yrduwpzm/

#content-breadcrumb {
  font-family: 'Varela Round', sans-serif
  font-size: 16px;
}

#content-breadcrumb #active {
  font-size: 50px;
  color: #4F95C4;
  vertical-align: middle; 
}
<div id="content-breadcrumb">
  Admin Control Panel &raquo;
    <span id="active">
      Dashboard
    </span>
</div>

Upvotes: 0

Robert Wade
Robert Wade

Reputation: 5003

You can use flex box and align-items to accomplish this:

(PS: your closing div and span tags are missing the right caret)

#content-breadcrumb {
  display: flex;
  align-items: center;
  font-size: 1rem;
}
  
#active {
    font-size: 2rem;
}
  
<div id="content-breadcrumb">
  Admin Control Panel &raquo;
    <span id="active">
      Dashboard
    </span>
</div>

Upvotes: 2

Related Questions