Center jquery tabbed panel on screen

I have a tabbedpanel declared like so :

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
    <sj:tabbedpanel id="mytabs2" selectedTab="0">
      <sj:tab id="tab1" href="one.jsp" label="Tagged"/>
      <sj:tab id="tab2" href="two.jsp" label="Search"/>
      <sj:tab id="tab3" href="three.jsp" label="Add"/>
    </sj:tabbedpanel>

I'm using the struts2 jquery plugin - http://code.go开发者_如何学Cogle.com/p/struts2-jquery/

How can I resize and center the tab on screen ? The tab should be 70% in width and appear in the center.

I've tried wrapping the tabbedpanel in a dev element and then using :

  <style>
  div { width:80%; text-align:center;  }
  </style>

But its not working too well. The width resizes but messes up my formatting within the tab elements. Is there another way ?

Thanks

Centering a div can be done by setting it's width to the desired value and setting margin to auto. Text-align only affects inline elements inside the div. (This is why your design gets messed up.)

div.yours { width: 70%; margin-left: auto; margin-right: auto }

div { width:80%; margin: 0 auto 0 auto}