Solved

Centering a div in html5

Posted on 2016-10-19
5
87 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 43

Expert Comment

by:Rob
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
0
 

Author Comment

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

Accepted Solution

by:
Julian Hansen earned 250 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>.
0
 
LVL 43

Assisted Solution

by:Rob
Rob earned 250 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
0
 

Author Comment

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

Featured Post

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

726 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