Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Moving content to center

    This never sticks for some reason! Could someone please tell me what to write in the CSS to get the three "buttons" into the centre of the page?

    html

    Code:
    <!doctype html>
    <head>
    	<link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    
    	<a href="#" class="button green">Button</a>
    	
    	<a href="#" class="button blue">Button</a>
    	
    	<a href="#" class="button grey">Button</a>
    
    
    </body>
    </html>


    CSS
    Code:
    body {
    	margin-right:auto;
    	margin-left:auto;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Anchors are inline elements. Set text-align:center; to body.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    aaronoafc (02-17-2012)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <html>
    <head>
    <style type="text/css" media="all">
    td {text-align: center}
    p {text-align: center}
    a.css_button_1 {
    clear:both;
    display:block;
    float:left;
    padding:5px;
    margin:0 10px 10px 0;
    background:#CCCCFF;
    border:1px solid #408000;
    text-decoration:none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    line-height:16px;
    text-align:center;
    color:#000000;
    }
    a.css_button_1:hover {
    color:#FFFFFF;
    background:#6666CC;
    }
    </style>
    </head>
    <body>
    <table border="1" width="30%">
    <tr><td><p><a href="somelink" class="css_button_1" style="clear:none;">button1<br />how to centre?</a></p></td>
    <td><p><a href="somelink" class="css_button_1" style="clear:none;">button2<br />centre me</a></p></td></tr>
    <tr><td><p><a href="somelink" class="css_button_1" style="clear:none;">button3 centre me</a></p></td>
    <td><p><a href="somelink" class="css_button_1" style="clear:none;">button4</a></p></td></tr>
    </table>
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •