Solved

Centering a div in html5

Posted on 2016-10-19
5
73 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
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 54

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 42

Assisted Solution

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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

772 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