CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

css vertical and horizontal alignment issues

I'd like to align my menu items and logo-picture both horizontally and vertically in the red DIV. How could I achieve that? I've tried to set margin left and right to auto as well as vertical-align to center, but that didn't work. Thanks for your help

See: http://jsfiddle.net/gm2wzL6z/

enter image description here

HTML:

<div id="nav-container">
    <nav>
        <ul id="navlist">
            <li id="active"><a href="#" id="current">Item one</a>
            </li>
            <li><a href="#">Item two</a>
            </li>
            <li><a href="#">Item three</a>
            </li>
            <li>
                <img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg">
            </li>
            <li><a href="#">Item four</a>
            </li>
            <li><a href="#">Item five</a>
            </li>
        </ul>
    </nav>
</div>

CSS:

#nav-container {
    height: 300px;
    background: red;
}
#navlist li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

Upvotes: 0

Views: 75

Answers (3)

Nathan Kellert
Nathan Kellert

Reputation: 618

In order for this to work you need 3 things.

1)A main div to act as the container 2)A div inside the container with the vertical aligh and a width of 100% of your container as you have to do relative positioning in order to do vertical align. 3)A final container to do your margin-left, margin-right auto. It has to have a set width thats smaller than the previous two containers 4)All your content sits inside the horizontal div 5)Dont set the height of the main container as this will limit the vertical align from going beyond that.

#nav-container {
    background: red;
    width: 100%
}

#vertical-align {
  position: relative;
  top: 50%;
    width:100%
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#horizontal-align{
 width: 100%
 max-width: 700px;
 margin-left: auto;
 margin-right: auto;
}

Upvotes: 0

Vucko
Vucko

Reputation: 20834

Use display:table/table-cell with vertical-align:

#nav-container {
    height: 300px;
    background: red;
    display:table;
    width:100%;
}
#nav-container nav{
    display: table-cell;
    height: 300px;
    vertical-align: middle;
    text-align:center;
}

#nav-container nav li{
    display:inline-block;
    vertical-align: middle;
}
<div id="nav-container">
    <nav>
        <ul id="navlist">
            <li id="active"><a href="#" id="current">Item one</a>
            </li>
            <li><a href="#">Item two</a>
            </li>
            <li><a href="#">Item three</a>
            </li>
            <li>
                <img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg">
            </li>
            <li><a href="#">Item four</a>
            </li>
            <li><a href="#">Item five</a>
            </li>
        </ul>
    </nav>
</div>

JSFiddle

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115011

#nav-container {
    height: 300px;
    background: red;
}
#navlist li {
    display: inline-block; /* this for personal preference :) */
    vertical-align: middle; /* this for alignment*/
    list-style-type: none;
    padding-right: 20px;
}
<div id="nav-container">
    <nav>
        <ul id="navlist">
            <li id="active"><a href="#" id="current">Item one</a>
            </li>
            <li><a href="#">Item two</a>
            </li>
            <li><a href="#">Item three</a>
            </li>
            <li>
                <img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg">
            </li>
            <li><a href="#">Item four</a>
            </li>
            <li><a href="#">Item five</a>
            </li>
        </ul>
    </nav>
</div>

Upvotes: 1

Related Questions