Nevershow2016 Nevershow2016 - 1 year ago 60
HTML Question

Putting tab content in the middle

Hi guys for some reason i cant move my tab and all the content in the middle.

I have tried things like

margin: 0 auto;
, setting a
etc but nothing has worked


margin: 0 auto;


Answer Source

If you're trying to center all the tab content:

.tab-content {
  text-align: center;


I misunderstood your initial question. You'll also want to do this:

.tab-group li {
  display: inline-block;

Lastly, you might notice a small gap between your tabs after adding the inline-block. A quick fix for that is to remove all the closing </li>s in your <ul> except the last one. This ensures no white space will mess with your spacing when using inline-block.

<ul class="tab-group">
  <li class="tab active"><a href="#signup">3D</a>
  <li class="tab"><a href="#login">REF</a></li>

If removing the closing tag bothers you (it bothers some people), you can always just remove all the white space manually.

<ul class="tab-group"><li class="tab active"><a href="#signup">3D</a></li><li class="tab"><a href="#login">REF</a></li></ul>

I'm a fan of the first method :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download