Centre the contents of a DIV

GRIFFIJ · Nov 3, 2014

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

vacunita · Nov 3, 2014

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

GRIFFIJ · Nov 3, 2014

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>



<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>
</li>
<li><a href="#">Cost</a></li>
<li><a href="#">Calender</a></li>
</ul> 
</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>
</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>
</li>
</ul> 
</li>
<li><a href="#">Shopping</a></li>
<li><a href="#">About</a></li>

</ul> 

</div>
</div> 
</body>
</html>

vacunita · Nov 3, 2014

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

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Centre the contents of a DIV

GRIFFIJ

Programmer

vacunita

Programmer

GRIFFIJ

Programmer

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor