CSS: Horizontal alignment centered but manually define vertical alignment?

Discussion in 'Web Design and Development' started by Kingsly, Sep 21, 2012.

  1. Kingsly macrumors 68040

    Kingsly

    #1
    Like the title says. I've got a div (well, and if that works I'll also have some text and logo) on a very simple one-page site. I want to use
    margin-left:auto
    margin-right: auto

    to center it, but I want to be able to manually define vertical position. So It'll be:

    site logo

    video

    contact link​

    With the vertical spacing that I want.
    Just like that.

    I assume there's a simpler method, but I'm basically coding off of w3schools. :p
    Help? :eek:
     
  2. fig macrumors 6502a

    fig

    Joined:
    Jun 13, 2012
    Location:
    Austin, TX
    #3
    I think he's looking to horizontally align things, not vertically.

    To the OP you're exactly right actually, or at least that's the simple way I always do it.

    margin: auto 20px;

    It isn't super elegant but it works.
     
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    Respectfully, this is not wise advice.

    Tables should only be used for tabular data, not for alignment of content. In addition, CSS using table attributes is highly discouraged in the UI community these days (less semantic web, etc).

    One should take the time to learn CSS to master proper alignment techniques and how to float and position things.

    The OP might be trying to do this:

    Code:
    <style type="text/css">
        div#container {
            position:relative;
            height:200px;
        }
        div.vertical{ 
            position:absolute; 
            top:50%; /* adjust this as needed */     
            left:0; 
            width:100%; 
            text-align:center;
        } 
    </style>
             
    <div id="container"> 
        <div class="vertical"> Site Logo </div>
        <div class="vertical"> Video </div>
        <div class="vertical"> Contact Link </div>           
    </div> 
    
    Basically a wrapper div with an arbitrary height set relatively postioned so 3 inner div's can be vertically centered and stacked with the content inside each center aligned horizontally. Adjust values as you see fit. Even if this is exactly what you want, experiment and you'll get it.

    Native CSS, full cross browser compatible, no tables.

    -jim
     
  4. bpaluzzi macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #5
    The link posted doesn't suggest using tables. It explains how it works in tables, then gives two examples of ways to vertically center things that _aren't_ in tables.
     
  5. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    You are right, I stand corrected. I browsed that link too quickly focusing on the code at top. Thank you for pointing that out. I'll drop down and do 50 pushups. :p
     
  6. bpaluzzi macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #7
    Heh heh. I did the exact same thing on that link before, so just wanted to make sure other people kept on reading :)
     

Share This Page