Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 269
  • Last Modified:

Centering a div

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
ddantes
Asked:
ddantes
  • 8
  • 6
  • 2
  • +1
1 Solution
 
aboo_sCommented:
In CSS it's a bit different story:
anyhow try this
 margin-left: auto ;
  margin-right: auto ;
0
 
ddantesAuthor Commented:
Thank you.  Unfortunately, it didn't center.
<div class="top-navigation" style="display:block; margin-left:auto ; margin-right:auto;">
0
 
aboo_sCommented:
could you give code for parent div?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
jtwcsCommented:
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
 
ddantesAuthor Commented:
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
 
aboo_sCommented:
Ok, I see they are centered in both ff and ie, latest versions.
0
 
ddantesAuthor Commented:
The menu is not centered, but is left-aligned in my browsers.
0
 
aboo_sCommented:
Well from here it looks pretty centered

What are you browsers anyway?
0
 
ddantesAuthor Commented:
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
 
aboo_sCommented:
I also tried it in ie8
here is a pictureie8 tester
0
 
ddantesAuthor Commented:
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
 
aboo_sCommented:
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
 
ddantesAuthor Commented:
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
 
GaryCommented:
Have you got a test page, the earlier link is not working.
0
 
ddantesAuthor Commented:
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
 
GaryCommented:
Add

.menu-top-wrapper {
    display: table;
}
0
 
ddantesAuthor Commented:
Yes!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 8
  • 6
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now