Solved

Centering a div in html5

Posted on 2016-10-19
5
46 Views
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.
0
Comment
Question by:ddantes
  • 2
  • 2
5 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
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
0
 

Author Comment

by:ddantes
Comment Utility
Thank you for your comment.  I tried applying that style, but the item is still not centered.  Please have another look.
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 250 total points
Comment Utility
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>.
0
 
LVL 42

Assisted Solution

by:Rob Jurd, EE MVE
Rob Jurd, EE MVE earned 250 total points
Comment Utility
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
0
 

Author Comment

by:ddantes
Comment Utility
Thanks to both experts.  Moving the div out of the ul resolved it.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now