centering items withing a float div_问答_开发者

开发者 https://www.devze.com 2023-03-03 12:39 出处：网络

I\'m learning CSS and so far managed after many many hours to create a simple layout but still dont know how to center things (text,block,whatever) inside a float:left div. Here\'s the code i just hop

相关专题：css css-float

I'm learning CSS and so far managed after many many hours to create a simple layout but still dont know how to center things (text,block,whatever) inside a float:left div. Here's the code i just hope someone might be able to help as im gonna go nuts in a very short time!

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <style type="text/css">
        #container {
            /* */
            border: 1px solid; 
            /* */
            padding-top: 10px;

            margin-left:auto;
            margin-right:auto;
            width: 980px;
            height: auto;
        }
        #content {
            display: inline-block;
        }
        #content .left {
            display: inline-block;
            border: 1px solid; 
            padding-left: 5px;
            padding-top: 10px;
            width:773px;
            float:left;

        }
        #content .right {
            display: inline-block;
            padding-top: 10px;
            width:200px;    
            float:right;
        }

        #content .inside-left {
           text-align: center;
           margin-left: auto;
           margin-right: auto;
        }


    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <div class="left">
                <!-- i need every inside-left class center aligned -->
                <div class="inside-left">
                    <table border="1">
                        <tr>
                            <td>center align</td>
                            <td>damn it</td>
                        </tr>
                    </table>

                </div>

            </div>
            <div class="right">
                test
            </div>
        </div>
    </div>
</body>

edit: oh and why the ** css is so hard to开发者_开发问答 understand? is it just me??

Just a tiny CSS modification makes a huge difference:

Change this:

#content .inside-left {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

To this:

#content .inside-left, #content .inside-left > * {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

See the difference: http://jsfiddle.net/8JfNF/1/

This CSS selector, #content .inside-left > *, selects all of the direct children (not grandchildren) of the .inside-left and applies the same CSS to them.

CSS is not tough, i think this is simplest logical thing in world of web...try and learn from some good website..

and there is some suggestion for you..

better use class instead of id
always write 4 basic table property width, cellpadding, cellspacing and border
to horizontal centered the things inside a td use text-align:center; to make vertical center write vertical-align:middle

to learn CSS tricks see my bookmarks...this will surely helps u