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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Center inside container

    https://dl.dropbox.com/u/66317396/Sc...2000.41.25.png

    A (content) and B (content-right) are placed inside the same container.
    I want B the the be in the middle next to A . And I want this all the time no matter how big A get's. I tried it to do with margin: auto - but that did not work. Although it worked for the container. I know that A affects the height of the container and I just want B in the center of it floating still right...

    I can do this by padding the top and guess for the middle. But once I type more text into the site I have to redo it.

    Code:
    html, body {
    	background-color:#F1D4AF;
    	margin: 10px;
    	padding: 0;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 12px;
    }
    
    #container {
    	Width: 760px;
    	Margin: Auto;
    }
    
    #content {
    	background-color: #ECE5CE;
    	margin-right: 280px;
    }
    
    #content .padding {
    	padding: 25px;
    }
    
    #content-right {
    	float: right;
    	width: 280px;
    	text-align: center;
    }
    
    #content-right .padding {
    	padding: 25px;
    }
    Last edited by GroteDwerg; 09-16-2012 at 11:49 PM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    You're talking about vertically centering multiple lines of text? I am assuming it is already centered horizontally with text-align: center.

    Code:
    #content-right {
    	float: right;
    	width: 280px;
    	text-align: center;
    }
    Couldn't find a previous post where I explained this, but for vertically centering multiple lines of text, you would use:

    Code:
    .center-container {
        display: table;
    }
    .center {
        display: table-cell;
        vertical-align: middle;
    }
    Code:
    <div class="center-container">
        <div class="center"></div>
    </div>
    http://www.vanseodesign.com/css/vertical-centering/

    It doesn't work in IE6 & 7, there are backups explained in the article, but I honestly wouldn't bother supporting them for such a little thing as centering.
    Last edited by Sammy12; 09-17-2012 at 12:13 AM.

  • Users who have thanked Sammy12 for this post:

    GroteDwerg (09-19-2012)


  •  

    Posting Permissions

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