CODEWITHSUNDEEP
htmlcsswordpress
Azurry
Azurry

Reputation: 526

Aligning Different sized Text Vertically

I'm having a bit of trouble aligning some items. Next to each-other as per the Design i've tried everything I know off and im not really to sure how to go about googling this.

Also if you have any alternative way's of doing this I'd appreciate it.(The whole side Tabbed thing)

Website

Design

So what I did is the Side bar is Positioned absolutely 

.side-tab{
    background: linear-gradient(90deg, rgba(2,2,25,0.9) 50%, rgba(255,255,255,0) 50%);
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 30em;
    padding-bottom: 15em;
}

It's going to be tabbed for the Big Carousel with different carousels and headers and such


<div class="side-tab row">
  <div class="tab-number col-md-6">
      <button class="tablinks" onclick="openTab(event, 'PRO')" id="defaultOpen">01</button>
      <button class="tablinks" onclick="openTab(event, 'CREAT')">02</button>
      <button class="tablinks" onclick="openTab(event, 'TIM')">03</button>
  </div>
    <div class="tab-title col-md-6">
        <button class="tablinks-title" onclick="openTab(event, 'PRO')" id="defaultOpen">PROFESSIONAL</button>
        <button class="tablinks-title" onclick="openTab(event, 'CREAT')">CREATIVITY</button>
        <button class="tablinks-title" onclick="openTab(event, 'TIM')">TIMELY</button>
    </div>
</div>

So How would I Align the "Title's" Next to the Numbers if the font size's are different, Or go about this whole thing in a more "Appropriate" manner

Upvotes: 0

Views: 34

Answers (1)

SarcasmMooch
SarcasmMooch

Reputation: 26

You can set the heights and line-heights of the buttons. Something like this:

.tablinks,
.tablinks-title {
    height: 70px;
    line-height: 70px;
}
.tablinks {
    font-size: 50px;
}
.tablinks-title {
    font-size: 25px;
}

Upvotes: 1

Related Questions