# Looking for help styling tabs

**URL:** <https://community.wpbeaverbuilder.com/t/looking-for-help-styling-tabs/4671>\
**Category:** Beaver Builder\
**Created:** [September 24, 2015, 12:57pm UTC](https://community.wpbeaverbuilder.com/t/looking-for-help-styling-tabs/4671 "2015-09-24T12:57:15Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![transmitstudio](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/transmitstudio/32/182_2.png) [@transmitstudio](https://community.wpbeaverbuilder.com/u/transmitstudio)\
**Post date:** [September 24, 2015, 12:57pm UTC](https://community.wpbeaverbuilder.com/t/looking-for-help-styling-tabs/4671/1 "2015-09-24T12:57:15Z")

</div>

I’ve been struggling with styling some tabs in a particular way for the last couple of days. Take a look at [here](http://partnershc.wpengine.com/about/special-programs/) and [here](http://partnershc.wpengine.com/healthcare-information-technology-hit/) at what I have so far.

I’ve been unable to center the text vertically (and ideally, those tabs would be circles, not rectangles). I need to target two divs: the one that contains all the labels, and then the labels themselves. I [found a page](http://vanseodesign.com/css/vertical-centering/) with a lot of suggestions for how to do this, but none of the methods seem to work.

It seems I should be able to use display: table-cell and vertical-align: middle to pull this off, but it gets all wonky when I try it. Has anyone managed to pull this off?

---

<div class="post-metadata">

**Author:** ![billy](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/billy/32/11_2.png) [@billy](https://community.wpbeaverbuilder.com/u/billy)\
**Post date:** [September 24, 2015, 1:14pm UTC](https://community.wpbeaverbuilder.com/t/looking-for-help-styling-tabs/4671/2 "2015-09-24T13:14:52Z")

</div>

Hey Dave,

Thanks for getting in touch. Good work on the tabs module, wow, looking great! That’s pretty complicated CSS and I’m not entirely sure if it’s possible, but we’ll take a look. Hang tight though, we’re a bit understaffed at the moment so we may not be able to get back to you until tomorrow.

Best,  
Billy

---

<div class="post-metadata">

**Author:** ![transmitstudio](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/transmitstudio/32/182_2.png) [@transmitstudio](https://community.wpbeaverbuilder.com/u/transmitstudio)\
**Post date:** [September 24, 2015, 1:22pm UTC](https://community.wpbeaverbuilder.com/t/looking-for-help-styling-tabs/4671/3 "2015-09-24T13:22:54Z")

</div>

Thanks Billy! I hope Robby and Justin are enjoying their time in Cabo. That looked like a very cool conference. I’m assuming you lost the coin toss!

Thanks for the compliment! The whole site is turning out really nice. It’s built on a custom BB child theme. The only thing I couldn’t figure out was how to make the top semi-transparent background section happen with the BB plugin, so that’s handled with ACF and a bunch of conditionals in the page template file. Now that I think about it I could have probably pulled the whole thing off with BB had I been patient enough to try to figure it out.

For now I’m ready to throw in the towel with this and just insert a few \<br\> in the tab titles so they all have the same number of lines, unless there’s some genius out there with a better idea!

---

<div class="post-metadata">

**Author:** ![billy](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/billy/32/11_2.png) [@billy](https://community.wpbeaverbuilder.com/u/billy)\
**Post date:** [September 24, 2015, 1:37pm UTC](https://community.wpbeaverbuilder.com/t/looking-for-help-styling-tabs/4671/4 "2015-09-24T13:37:01Z")

</div>

Yep, they sure are! 🙂 I actually made the call to stay back. I have young twins and felt bad for leaving an entire week, plus, someone has to man the fort, right? 🙂 I do kind of wish I would have gone though, next year!

I am going to have Ben take a look in the morning, it’s a bit too complex for my coding chops, but he may have some suggestions.

Best,  
Billy

---

<div class="post-metadata">

**Author:** ![transmitstudio](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/transmitstudio/32/182_2.png) [@transmitstudio](https://community.wpbeaverbuilder.com/u/transmitstudio)\
**Post date:** [September 24, 2015, 1:56pm UTC](https://community.wpbeaverbuilder.com/t/looking-for-help-styling-tabs/4671/5 "2015-09-24T13:56:37Z")

</div>

Thanks, Billy. And you’re a good guy for staying back with the little ones!

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [September 25, 2015, 6:02am UTC](https://community.wpbeaverbuilder.com/t/looking-for-help-styling-tabs/4671/6 "2015-09-25T06:02:16Z")

</div>

Hey Dave,

Could you try this bunch of snippets? Since you’re using the BB theme, you can place this code directly under Theme Appearance \> Code \> JavaScript code. This places a `span` tag around the text inside the `.fl-tabs-label`.

```auto
jQuery(document).ready(function() {
  jQuery('.fl-tabs-labels .fl-tabs-label').each(function(){
    jQuery(this).wrapInner('<span></span>');
  });
});

```

Then add this CSS snippet as well.

```auto
.fl-tabs-labels .fl-tabs-label {
  display: table;
  width: 100%;
  border-radius: 100%;
}
.fl-tabs-labels .fl-tabs-label span {
  display: table-cell;
  vertical-align: middle;
}

```

Let us know how it goes! 🙂

Edit: Added CSS to make it circle-ish. 🙂

Ben

---

<div class="post-metadata">

**Author:** ![transmitstudio](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/transmitstudio/32/182_2.png) [@transmitstudio](https://community.wpbeaverbuilder.com/u/transmitstudio)\
**Post date:** [September 25, 2015, 12:25pm UTC](https://community.wpbeaverbuilder.com/t/looking-for-help-styling-tabs/4671/7 "2015-09-25T12:25:15Z")

</div>

You, sir, are the master. Thanks so much for the help!

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [September 26, 2015, 7:07am UTC](https://community.wpbeaverbuilder.com/t/looking-for-help-styling-tabs/4671/8 "2015-09-26T07:07:56Z")

</div>

Hey Dave,

No worries! Enjoy BB! 🙂

Ben

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [January 14, 2016, 6:58am UTC](https://community.wpbeaverbuilder.com/t/looking-for-help-styling-tabs/4671/9 "2016-01-14T06:58:53Z")

</div>

Moved DAW Digital’s reply as a new topic - [http://forum.wpbeaverbuilder.com/support/q/horizontal-sub-menu](http://forum.wpbeaverbuilder.com/support/q/horizontal-sub-menu)

---

<div class="post-metadata">

**Author:** ![system](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9db1b183a7ea1efa26199a2a2b3511d742473dae.png) [@system](https://community.wpbeaverbuilder.com/u/system)\
**Post date:** [April 27, 2019, 10:18pm UTC](https://community.wpbeaverbuilder.com/t/looking-for-help-styling-tabs/4671/10 "2019-04-27T22:18:39Z")

</div>