CSS: Horizontal alignment centered but manually define vertical alignment?

[Kingsly]

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. 😛
Help? 😱

 

[TimothyJacobs]

Check out this link: http://phrogz.net/css/vertical-align/index.html

 

[fig]

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.

 

[SrWebDeveloper]

Check out this link: http://phrogz.net/css/vertical-align/index.html

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:

<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

 

[bpaluzzi]

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).

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.

 

[SrWebDeveloper]

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.

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. 😛

 

[bpaluzzi]

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. 😛

Heh heh. I did the exact same thing on that link before, so just wanted to make sure other people kept on reading 🙂