Center div using css equivalent to table method

Question

The following table method properly centers the div and the size of the div matches that of the content:

<table>
<tbody>
<tr>
<td width='50%'></td>
<td>

<div>
<input type='text' name='linksearch' size='40'/>
<a href=''>Search</a>
</div>

</td>
<td width='50%'></td>
</tr>
</tbody>
</table>

What is the equivalent CSS using just div elements? I see a lot of answers like:

div.center {
    margin-left: auto;
    margin-right: auto;
}

but when using this method it is not clear to me how to make the width of the div grow or shrink to match the content of the div. I can specify an explicit width but even then, the content can overflow to the right and thus it is not really centered (you can see this clearly by setting the background-color of the div).

So is the table method is still superior or is there a way to do this using only CSS?

UPDATE:

As requested, here is an example that illustrates the problem:

http://jsfiddle.net/qn0txere/3/

The first "table method" works as expected. The second 'margin: 0 auto' method does not really work in that the div does not shrinkwrap around the content. The content overflows to the right.

Do you want the 'Search' word to be under the input or directly next to it? — BuddhistBeast, Sep 06 '14 at 19:03
Are you looking for something similar to this? http://jsfiddle.net/qn0txere/ — BuddhistBeast, Sep 06 '14 at 19:05
@BuddhistBeast No, text-align: center only centers the text, not the div. — squarewav, Sep 06 '14 at 19:15
Well, then you can add in margin: 0 auto; to "center the div". I don't understand what you are trying to accomplish - can you provide an example where the content overflows to the right? — BuddhistBeast, Sep 06 '14 at 19:19
Well you're on to something. I don't think you need the inner margin: 0 auto though. You're just centering an inline-block element with text-align: center. A purer way might be to use margin: 0 auto on the outer element in place of text-align: center and then make the inner div inline-block. I have to run but will play with it later. — squarewav, Sep 06 '14 at 19:43
Honestly, it sounds like you know exactly what you're trying to accomplish... And since you have an extremely good handle on block level elements and the use of margin over text-align I think you should just read this: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html - That will give you the answer of whether the "table method is superior" — BuddhistBeast, Sep 06 '14 at 19:48

Alex · Answer 1 · 2014-09-06T19:07:59.553

0

I see what you mean, but there are ways around that, and using CSS for the style is far more beneficial in the long run as it's much easier to change later on etc,

To fix the problem of the content going outside of the div you can use the auto property for the width and height,

Like this:

div.center {
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

You may also wish to add min-width and min-height properties if needed to make it look more appealing if there isn't a great amount of content within the div (or max properties) :

min-width: 300px;
min-height: 500px;
max-width: 500px;
max-height: 600px;

You may also wish to add a ID or class to the specific div, so in this case you can more clearly write the CSS for just that specific div

edited Sep 06 '14 at 19:07

answered Sep 06 '14 at 19:00

Alex

1,208
16
26

This doesn't seem to work for me. If I use width: 50%, it's mostly centered but not really as described in my q. But width: auto has no effect. The div just uses the width of the parent it seems. – squarewav Sep 06 '14 at 19:19
Ahh Yea.. I see your problem, just tried it out now, I'll have a mess around and see if I can sort it out – Alex Sep 06 '14 at 19:47

score 0 · Answer 2 · answered Sep 06 '14 at 20:08

You have to add a containing div (preferred) or add properties to the body. Since your markup was wrong anyways, I'll go for the preferred method by adding the FORM element:

<div class="center">
    <form>
    <input size="40" name="linksearch" type="text"/>
    <a href="#"> Search </a>
    </form>
</div>

Now, since I have my required elements, I can center things and make them work as I want because I have the chance to add positioning for all elements ( + proper markup):

.center {
    text-align:center
}
form {
    white-space: nowrap;
    padding: 10px;
    margin:0 auto;
    width: auto;
    background-color: #cc0;
    display:inline-block
}

Really easy, huh? You can see an update to your fiddle so you can preview and play around

You don't need the margin or width properties. Using text-align: center and an inner element with display: inline-block seems to be the answer. A div will do. Don't need a form element. Strangely using margin: 0 auto on the outer element instead of text-align: center does not work: http://jsfiddle.net/qn0txere/6/. I suppose I'll just use text-align center then. — squarewav, Sep 06 '14 at 21:15

Center div using css equivalent to table method

2 Answers2