CODEWITHSUNDEEP
htmlcsscentering
Sam
Sam

Reputation: 42337

How can I horizontally centre (center) an element of unknown width when another element is floated next to it?

Given the following HTML:

<div id="container">
    <div id="left">Left</div>
    <div id="centre">Centred</div>
</div>

and CSS:

#left {
    float: left;
    text-align: left;
}

#centre {
    text-align: center;
}

How can I horizontally centre the centre element without giving it a fixed width? The following image shows the desired result:

The "left" element is on the left side. The "centred" element is centred horizontally relative to the container. Both elements are vertically aligned.

Here's what I can get it to look like so far:

The "left" element is on the left side. The "centred" element is centred horizontally relative to the space between the right side of the "left" element and the right side of the container. Both elements are vertically aligned.

Here's a jsFiddle demonstrating what I have done so far.

I prefer a general-purpose solution that doesn't require widths of anything to be specified.

Upvotes: 0

Views: 541

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

If you want the #centre element with a shrink-to-fit width for the content, you can use the following:

<div id="container">
    <div id="left">Left</div>
    <div id="centre">Centred</div>
</div>

and the following CSS: 

#container {
    width: 175px;
    text-align: center;
    position: relative;
    border: 1px solid black;
    padding: 5px;
    margin: 5px;
}
#left {
    position: absolute;
    border: 1px solid black;
    padding: 5px;
    margin: 5px;
}

#centre {
    display: inline-block;
    border: 1px solid black;
    padding: 5px;
    margin: 5px;
}

If you want to get the shrink-to-fit width for #centre, you need to either float the element, use absolute positioning or declare an inline-block display type. Since you don't want to specify a width for #centre, using float or absolute positioning will not allow you to center the content. However, if you specify display: inline-block and use text-align: center on the parent #container, you will get center the element and have some styling control for the border, padding and so on.

However, for this to work, you must use absolute positioning for the #left element. If you use float, the content of #centre will wrap around the left element and change the centering.

Set position: relative on the #container otherwise the #element will be positioned with respect to the root (or some other non-static positioned) element of the page.

Fiddle: http://jsfiddle.net/audetwebdesign/hTFBa/

Footnote

In your demo example, you have single word text labels for the content. If you had multi-word phrases, you would need to constrain the left element's width or specify some margins on the center element to prevent text overlap.

Upvotes: 1

ralph.m
ralph.m

Reputation: 14345

If you know the width of the left div, you can do it like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

#left {
    float: left;
    width: 30px;
}

#centre {
    margin: 0 40px;
    text-align: center;
}

#left, #centre, #container {
    border: 1px solid #000;
}

#container {
    width: 175px;
    padding: 5px;
}

</style>

</head>
<body>

<div id="container">
    <div id="left">Left</div>
    <div id="centre">Centred</div>
</div>

</body>
</html>

Upvotes: 1

Related Questions