Horizontally center a div

HTML & CSS
1

Hi,
I am tying to horizontally center a <div>
But not get it to work I seem to have to put in the width always. And it is not really in the center despite any width I put in.

HTML file

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="/cuislegibney/css/stylesheet.css"/>
    </head>
    <body>
        <div class="outer">
            <div class="inner">
                <p>Blah blah blah</p>
                <p>Yack yack yack</p>
            </div>
            <div class="inner">
                <table>
                    <tr>
                        <th>Col 1</th><th>Col 2</th><th>Col 2</th>
                    </tr>
                    <tr>
                        <td>Aaaa</th><td>BbbbHH</th><td>BbbbHH</th>
                    </tr>
                    <tr>
                        <td>Cccc</th><td>DdddO</th><td>BbbbHH</th>
                    </tr>
                    <tr>
                        <td>EeeeL</th><td>FfffM</th><td>BbbbHH</th>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

The css file

body    {
        background: url(/cuislegibney/images/bg.jpg) no-repeat center center fixed; 
        background-size: cover; 
        width: 100px;
        margin: auto;
        } 
.outer    {
        border: 2px solid red;
        display: inline-block;
        }
.inner    {
        border: 2px solid green;
        }    
table    {
        border: 2px dashed blue; }
/*
position: static
position: absolute;
position: relative;
position: fixed;

display: block;
display: inline-block;
display: inline;
display: none;

clear: left;
clear: right;
clear: both;

top: 5px;
right: 5px;
bottom: 5px;
left: 5px;

float: ....
*/

The site can be found here www.cuislegibney.com

Thanks,
Shane

2

Shane, the body tag has a width of 100px. How do you expect to fit a page within 100px? Most of the time, the body has no width assigned so it is the full with of the browser window.

3

make body 100%
and then you can align divs with margin-left:auto and margin-right:auto. A width must be defined in that div though…

Alternatively, get some info on display:flex and use content-align

4

html and css concept to center a div that I have used successfully on tons of projects is below. The concept is below. It has 2 components, an html portion and obviously a css portion. Good luck, Braulio

html portion is below.
(open div tag )class="centre"Some Text (closing div tag)

css portion is below.
div.centre
{
width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}

5

Divs don’t need display:block;. That’s default for them.

6

Ok fair enough. that makes sense. I would prefer not to assign a width. So I will leave it blank and then it will be at 100%.

Body is now at 100%. So I have to set the width of the outer div. But what if the content changes? The div is always stuck at 300px or whatever? It is working now.

body    {
        background: url(/cuislegibney/images/bg.jpg) no-repeat center center fixed; 
        background-size: cover; 
        border: 2px solid yellow;
        margin: auto;
        } 
.outer    {
        border: 2px solid red;
        padding: 20px;
        width: 300px;
        margin: auto;
        }
.inner    {
        border: 2px solid green;
        }    
table    {
        border: 2px dashed blue; }

1360×358 57.2 KB

That’s been taken out now also.

Is this the same as,

margin: auto;

Thanks,
For your help,
Shane

7

Margin:auto; applies to all 4. Top, right, bottom, and left.

Vertical auto margins do nothing on static elements like that so unless you explicitly need vertical margins, it doesn’t matter.

Ideally to make things responsive, the outer container is set like…max-width:1000px; and the margin:auto; is set. That way it centers but will update with the page accordingly to shrink.

8

You can set width:auto
and max-width:blabla px;

then the div will shrink to the size of the content and expand to your max-width if need be

This will centre/try to centre all 4 margins.

9

That’s default.

10

Ok thanks, I think this is what i really need to understand.

In the image below you can see how the table should be centered. But I’d like the div above to be flush on the left with it. Also the table can change width.

1358×633 139 KB

Thanks for your help,
Shane

11

From the looks of it, the table is wider than the parent so how can it center?

Do you have a website?

12

www.artgibney.com I will message you the login details.
Thanks,

13

Give the table:

table-layout:fixed;width:100%;

That will only constrain it within the parent though. I’m still not sure what’s supposed to center though.

14

I want the outer div which is red to be centered and I know that it is but I would like it to also be the width of the table.
So the table will always be in the center of the page. Then the inner div will be flush left with each other.

I will do that now.
Thanks

15

Brilliant i think that is it.

16

1363×634 134 KB

I see that the text in the table column teaching points is truncated, which is fine. But so is the column ‘Question’ which is a problem here.

17

Remove the white-space:nowrap, the width, and overflow:hidden; you have set for the <td>'s in your CSS.

18

Ok much better. Seems to be setting equal spacing for each column. I will try to set the first two td’s to a specific width, using nth-child.

19

I guess this is not correct because it doesn’t work,

td         { 
            padding: 6px;
            vertical-align: top; 
            text-align: left; 
            /*width: 40px; 
            overflow: hidden;  
            white-space: nowrap;*/ }
td nth-child(1) {
            width: 10px; }
td nth-child(2) {
            width: 10px; }
20

Well that should at least be,

td:nth-child(2) {
width: 10px; }