Putting tab content in the middle

Nevershow2016

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 width etc but nothing has worked

Fiddle

.tab-group{
    margin: 0 auto;

}
Andy Hoffman

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

.tab-content {
  text-align: center;
}

Edit:

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>
</ul>

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 :)

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Putting text at the middle of an <hr>

From Dev

Putting content below AppBarLayout in a CoordinatorLayout

From Dev

putting fixed content to flexslider slideshow

From Dev

Putting content next to vertical navigation

From Dev

Putting a file content into an sql query?

From Dev

CSS putting menu inline with the content

From Dev

Putting json content into PHP variable

From Dev

Bootstrap: Content in the middle?

From Dev

content to sit in the middle of div

From Dev

css align content in middle

From Dev

Content in the middle (grid)

From Dev

Vertical middle content in div?

From Dev

Make the content of the overlay in the middle

From Dev

Why is the Content not aligned in the middle?

From Dev

Putting Opera tab manager on the most top?

From Dev

HTML CSS putting a unknown tab before element

From Dev

Not working in putting the text in the middle of the box in CSS3

From Dev

Putting my edit-text and button in the middle of my layout

From Dev

Git: putting a new branch in the middle of two existing branches

From Dev

Place a text content in the middle of a container

From Dev

How to change middle content with ajax

From Dev

Unable to run regex on file content after putting it?

From Dev

putting <p> tags around Wordpress content

From Dev

DrawerLayout: Putting button to the center of The main content view

From Dev

Putting WooCommerce Review content into product summary

From Dev

putting <p> tags around Wordpress content

From Dev

Middle click tab opening stopped working in Firefox

From Dev

Toggle tab content

From Dev

Ionic different tab content