Why won't it center? (CSS question) 1

OsakaWebbie · Sep 30, 2010

Can someone see why a couple of buttons on my page are not appearing centered? The real site is password protected, but I made a super-simplified HTML file of only the relevent parts of the page for you:

http://fgraham-kansai.jp/contacts/notcentered.html

(Yes, it looks useless, but trust me, there is a lot more on the real one!)

It seems so straightforward - there is this markup:

Code:

<div id="buttonsection">
  <button class="simpleonly" id="showadvanced" type="button">Advanced Search Options</button>
  <button id="search" type="submit">Search!</button>
</div>

And in

http://fgraham-kansai.jp/contacts/themes/fgraham/styles.css

(which is called in contacts.css) there is this CSS:

Code:

body#index #buttonsection { text-align:center; }

I have verified that the "body#index #buttonsection" selector in that file does operate on the right element (I added a gaudy border temporarily to test), so that's not the problem. Anybody see what I'm missing?

Vragabond · Sep 30, 2010

It is true, any text that appears in your container will be centered. Hence, you will see that the actual text inside a button is centered. However, your two elements are not text, or inline, they're block level element. Block level elements are centered differently: you need to apply equal margins on both left and right side of a fixed width element. Since you already have fixed width elements, all you need to do is add equal margins on each side. You can do that by applying auto to left and right margin:

Code:

body#index #showadvanced, body#index #search {
  display: block;
  [!]margin: 0 auto;[/!]
}

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

OsakaWebbie · Oct 1, 2010

Beautiful - thanks! I'm still trying to get my brain wrapped around CSS (as well as learning several other related languages at the same time - jQuery, albeit quite cool, is particularly cryptic for me at times), so I appreciate the patience of the Tektips folks when I ask dumb questions.

ChrisHunt · Oct 5, 2010

Or you could try this:

Code:

body#index #buttonsection button { display:inline; }

which will make the buttons behave like inline text.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

OsakaWebbie · Oct 5, 2010

That's a good tip, too - I'll remember that. There are probably times when one or the other of those approaches is more appropriate for other reasons.

While we're talking about this, a question that has been on my mind and might be related to the same topic is how to get a table that is in a div to center even when its content forces it to overflow its container, extending on both sides equally instead of just to the right. Margin:auto doesn't do it, so after reading Chris' post I decided to try making the table display:inline, but that merely has the interesting effect of making the table cell backgrounds transparent. The relevent markup is:

Code:

<body id="list">
  <div id="main-container">
    <div id="content">
      <table id="mainTable" class="tablesorter">
      etc.

CSS as it currently stands:

Code:

body { text-align:center;  background-color: LightGray; }
body div#main-container {
  background-color: White;
  text-align:left;
  width:800px;
  border: 1px solid Black;
  margin: 10px auto 0px auto;
}
div#content { margin:0 10px 0 10px; background-color: White; }
body#list table { margin-right:auto; margin-left:auto; }

The content in the table, and even the number of columns, is dynamic, so sometimes it's small and sometimes it's too big for its britches (i.e. for the 780 pixels I have given it). Most displays are big enough that there is lots of unused gray space on both sides, so when the table expands, it would be nice if it used that space (on the left, too, not just the right) before it resorts to offering a scroll bar.

It would actually be even better if the whole main-container div would expand to encompass its contents (it would look neater in not only this case but other cases where the content is unpredictable, like when the user enlarges his font size forcing form inputs or non-wrapping text to get long), but as far as I know divs won't do that like tables will. (Min-width sounded promising for non-IE browsers, but ends up looking like width=100% because there are divs inside it that don't have a specified width.) If I'm wrong on that, please enlighten me!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Why won't it center? (CSS question) 1

OsakaWebbie

Programmer

Vragabond

Programmer

OsakaWebbie

Programmer

ChrisHunt

Programmer

OsakaWebbie

Programmer

Similar threads

Part and Inventory Search

Sponsor