Centering Tab Titles

[RishiRiP]

Is there a way such that tab title text can be centered, and when the title is too long to fit the tab, it overflows to the right like the default tab title? So that the beginning of the title is still visible. Any thoughts would be greatly appreciated!

[ch3f]

Im assuming you know and possibly using CSS scripting..try this

.tab .title {
    justify-content: center !important;
}

[RishiRiP]

@ch3f Hi thanks for replying. I tried this but like you see in the pic, the title of the first tab overflows the tab width but still it shows in the middle which is kind of weird.
The title of the tab must show "JavaFX Java GUI Tutorial - 12 - ChoiceBox (Drop Down Menu)" instead it is cutting the first two words.

[A Former User]

Try this

.tab-position .tab .title {
  flex: 0 1 auto;
  -webkit-mask-image: none;
  margin: 0 auto;
}

[RishiRiP]

@potmeklecbohdan Thanks for the reply. Sorry but this doesn't work. I also want to tell you I use this code to make the tabs span to the full width of the window.

#tabs-container.top .tab-strip {
  display: flex !important;
  margin-right: 1.5rem;
}

#tabs-container.top .tab-strip span {
  flex: 1 1 0 !important;
  display: flex !important;
}

#tabs-container.top .tab-position {
  flex: 1 1 0 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  height: 30px !important;
}

#tabs-container.top .tab-position .tab .favicon,
#tabs-container.top .tab-position .tab .close {
  flex: 0 0 18px !important;
}

#tabs-container.top .newtab {
  position: relative !important;
  left: auto !important;
  top: auto !important;
}

.audioicon {
  transform: scaleX(0.5) translateZ(0);
  transform-origin: left top;
}

[A Former User]

@RishiRiP You overwrite the flex coz the selector #tabs-container.top .tab-strip span affects much more than it should. Change it so that it requires the span to be a direct child of the .tab-strip (insert a > in between). Why do you even use such a generic selector in such a large area?

[RishiRiP]

Wow!! Thanks, it worked out now. Actually, I didn't write that code, I found it on this forum and just applied it without checking it first. One more request, can we actually center the title. It seems a bit off-center as of now like in this pic.

[A Former User]

@RishiRiP I’ve also changed the code a little to keep the fade effect at the end…

.tab-position .tab .title {
  flex: 0 1 auto;
  margin: 0 auto;
  max-width: calc(100% - 18px);
}
.tab-position .tab .title::after {
  content: '';
  display: inline-block;
  width: 18px;
}

[RishiRiP]

@potmeklecbohdan Thanks a lot man. Works like charm. Just the 18px needs some adjusting, everything works perfectly.