Solved

Centering a div

Posted on 2014-03-11
17
252 Views
Last Modified: 2014-03-14
Using html5, I'd like to center a div horizontally.  If I use <center> before and after the div, it is centered.   If I try to use CSS: <div class="top-navigation" style="display:block; margin: 0 auto">   it is not centered.  Please correct my code.
0
Comment
Question by:ddantes
  • 8
  • 6
  • 2
  • +1
17 Comments
 
LVL 10

Expert Comment

by:aboo_s
ID: 39922551
In CSS it's a bit different story:
anyhow try this
 margin-left: auto ;
  margin-right: auto ;
0
 

Author Comment

by:ddantes
ID: 39922580
Thank you.  Unfortunately, it didn't center.
<div class="top-navigation" style="display:block; margin-left:auto ; margin-right:auto;">
0
 
LVL 10

Expert Comment

by:aboo_s
ID: 39922602
could you give code for parent div?
0
 
LVL 10

Expert Comment

by:jtwcs
ID: 39922613
For your example, a width needs to be applied in order for the div to be centered. Have a look here.

Since a div is a block element by default, it will expand to fit the width of the parent element.  By applying a width to the div, less than that of the parent, the remaining margin space will be split between the left and right margins to center the div.
0
 

Author Comment

by:ddantes
ID: 39922617
Thank you.  The person who designed the site originally used a responsive framework with which I have no experience.  The width of elements is fluid, depending on the visitor's device and display characteristics.  So I'm not sure it would work to specify a width for the div.

www.mauivacationrental.com/test.htm is a sample page, and the div element I would like to center is the menu toward the top of the page.  The page will say "sorry, that page was not found", but that is the actual page which demonstrates the element to be centered.

**EDIT by eenookami
http://www.experts-exchange.com/R_28708.html
0
 
LVL 10

Expert Comment

by:aboo_s
ID: 39922673
Ok, I see they are centered in both ff and ie, latest versions.
0
 

Author Comment

by:ddantes
ID: 39922675
The menu is not centered, but is left-aligned in my browsers.
0
 
LVL 10

Expert Comment

by:aboo_s
ID: 39922678
Well from here it looks pretty centered

What are you browsers anyway?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:ddantes
ID: 39922689
At the moment I'm using IE8, Chrome 31, and Firefox 23.  It's to the left in all of them.
I can center it with html, or with divalign: "center", but those don't validate with W3C.  I'd prefer to use CSS.
0
 
LVL 10

Expert Comment

by:aboo_s
ID: 39922701
I also tried it in ie8
here is a pictureie8 tester
0
 

Author Comment

by:ddantes
ID: 39922706
I see the problem, and sorry for my mistake.  If IE lte IE8, it is redirected to another site, because IE6-8 can't render html5 properly.  The page will need to be viewed with IE9 or later, or another browser.

I uploaded a simpler page, www.mauivacationrental.com/test2.htm.  It just has a div with an image.  I styled the div for inline block display, and margin 0 left & right, and the image is not centered.
0
 
LVL 10

Expert Comment

by:aboo_s
ID: 39922726
try it now:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>test</title>
<link href="p7dmm/p7DMM01.css" rel="stylesheet" type="text/css" media="all">
<link href="p7affinity/p7affinity-1_01.css" rel="stylesheet" type="text/css">
<link href="p7affinity/p7affinity_print.css" rel="stylesheet" type="text/css" media="print">
<link rel="stylesheet" href="p7affinity/global_css.css" type="text/css" media="screen">
<style>
body {min-width: 1020px;}
.columns-wrapper, .menu-top-wrapper, .p7dmm-sub-wrapper {width: 980px;}
</style>
</head>
<body onLoad="pwset()">

<div style="width:50%;margin:auto;float-right:auto;background:#000;"><img src="palm.jpg"></div>

</body>
</html>
0
 

Author Comment

by:ddantes
ID: 39922758
Thank you.  When I tested that, the div was centered, but the palm image was left-justified.  When I applied the code to a page with the menu bar, the sub-menus overlapped the main menu, and it became distorted when the window was narrowed.  I think this is a more challenging question than I anticipated.  Your efforts are appreciated.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39923860
Have you got a test page, the earlier link is not working.
0
 

Author Comment

by:ddantes
ID: 39924089
I made a mistake with that link and have requested attention to correct it.  It should have been www.mauivacationrental.com/test.htm    In any event, I'd like to center the menu with CSS on all the pages at www.mauivacationrental.com.  I can do it with <center> or with divalign=center, but I'd prefer to use CSS3.  The menu is in a responsive container, and so are its submenus.
0
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39924106
Add

.menu-top-wrapper {
    display: table;
}
0
 

Author Comment

by:ddantes
ID: 39924120
Yes!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Wordpress theme to easily (hopefully!) make this type of site 1 35
jQuery detect if it is a mobile device 3 95
CSS Question 5 38
Add animation to your css 12 32
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

919 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

21 Experts available now in Live!

Get 1:1 Help Now