Centering a div in html5

Posted on 2016-10-19
Medium Priority
Last Modified: 2016-10-19
It's been a while since I needed to code an html5 page, and I'm having a challenge centering a div.  The page is at www.mauitradewinds.com/links.htm   At the bottom of the top section of links there is a link to Maui Helicopter Tours.  The div is styled with textalign:center, but it is not centered.  Please advise.
Question by:ddantes
  • 2
  • 2
LVL 43

Expert Comment

ID: 41850889
You need "margin: 0 auto;" to centre. Top and bottom are 0px and the left and right margins are automatic.

Really it's the left and right margins that need to be set to "auto", you can set what you life for top and bottom

Author Comment

ID: 41850943
Thank you for your comment.  I tried applying that style, but the item is still not centered.  Please have another look.
LVL 62

Accepted Solution

Julian Hansen earned 1000 total points
ID: 41851124
It is centered - do you want it centered relative to the page or to the column it is in?

It is in a <li> container along with the menu items above it - so any attempt to center it will be relative to its container.

If you want it centered on the page you have to take it out of its container and put it after the closing </ul> and before the <h3>.
LVL 43

Assisted Solution

Rob earned 1000 total points
ID: 41851131
Sure. I'm on my phone at the moment so when I get to my laptop I'll be able to take a better look.

In the meantime, is that div or any around it, using the float style? You may need to set a with on the div and it's parent

Author Comment

ID: 41851149
Thanks to both experts.  Moving the div out of the ul resolved it.

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question