CODEWITHSUNDEEP
cssreactjsflexboxantd
Freddy.
Freddy.

Reputation: 1745

Ant.Design Tabs alignment

I have made a basic Tabs component following this documentation here.

This is my current output. enter image description here

Does anyone know the CSS to align ant-tabs-tab at the center?

I can see that there are different position placement however there isn't a top-center option.

Current CSS:

  .ant-tabs-tab {
    flex-grow: 1;
    margin-right: 0px;
    width: 80%;
    text-align: center;
  }

The output from the above CSS. I would like to keep the same size as the first image but have it center aligned. Not sure if this is possible but I thought I'd check first.

enter image description here

Upvotes: 6

Views: 7147

Answers (2)

YukioSenpai
YukioSenpai

Reputation: 83

You have a property called centered in the Tabs component and all your TabPane will be centered.

<Tabs centered>

Upvotes: 8

Dennis Vash
Dennis Vash

Reputation: 53874

Do you mean like this?

enter image description here

.ant-tabs-nav-scroll {
  display: flex;
  justify-content: center;
}

Edit Q

Upvotes: 6

Related Questions