INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Centre the contents of a DIV

Centre the contents of a DIV

(OP)
Hi,

I was wondering if you could help me with an issue I have in a div it is a navigation bar inside a containing div I have managed to centre it horizontally but I can't seem to vertically here is the code underneath:

#container #contnav #navmenu {
padding: 0px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
border: thin solid #F0C;
height: 50px;
width: 888px;

Kind regards Joel

RE: Centre the contents of a DIV

That kind of depends on what is inside the div.

At it most simple, perhaps a line-height that matches the height of the Div might do it. But again without seeing the HTML its hard to say.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Centre the contents of a DIV

(OP)
Thank you Phil

Please find below the HTML code I hope this helps in the navigation bar there is only buttons

Thanks Joel

HTML Code

<body>

<div id="container">

<div id="logo">
<img src="images/Logo.fw.png" alt="" name="logo" width="960" height="95" id="logo2" />
</div><!-- Logo Div -->

<!--Navigaton Bar HTML Code-->

<div id="contnav">
<ul id="navmenu">

<li><a href="#">Home</a></li>
<li><a href="#">Holiday</a>
<ul class="sub1">
<li><a href="#">Travel</a>
<ul class="sub2">
<li><a href="#">Travel At A Glance</a></li>
<li><a href="#">Inbound</a></li>
<li><a href="#">Outbound</a></li>
<li><a href="#">Things To Remember</a></li>
</ul><!--End of Holiday/Travel Sub 2 Menu-->
</li>
<li><a href="#">Cost</a></li>
<li><a href="#">Calender</a></li>
</ul> <!--End of Holiday Sub 1-->
</li>
<li><a href="#">Disney</a>
<ul class="sub1">
<li><a href="#">Parks</a>
<ul class="sub2">
<li><a href="#">Magic Kingdom</a></li>
<li><a href="#">Epcot</a></li>
<li><a href="#">Animal Kingdom</a></li>
<li><a href="#">Hollywood Studios</a></li>
<li><a href="#">Typhoon Lagoon</a></li>
<li><a href="#">Blizzard Beach</a></li>
</ul><!--End of Disney/Parks Sub 2 Menu-->
</li>
<li><a href="#">About Disney</a></li>
</ul>
</li>
<li><a href="#">Non Disney</a>
<ul class="sub1">
<li><a href="#">Parks</a>
<ul class="sub2">
<li><a href="#">Sea World</a></li>
<li><a href="#">Universal Studios</a></li>
</ul><!--End of Disney/Parks Sub 2 Menu-->
</li>
</ul> <!-- End of Sub 1 Menu-->
</li>
<li><a href="#">Shopping</a></li>
<li><a href="#">About</a></li>

</ul> <!--End of main Navmenu-->

</div>
<!-- End of Containing Div--></div> <!-- End of Containing Div-->
</body>
</html>

RE: Centre the contents of a DIV

Assuming you are maintaining the same CSS as in your other question about this menu. Giving your #navmenu ul a line-height of 80px to match the ul's height, should be all that it takes to vertically center your navigation buttons inside the div.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close