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
Solved

How to make a container with child items center

Posted on 2014-07-17
16
176 Views
Last Modified: 2014-07-17
I have items inside a <div> container. My problem is that the <div> container that contains all these items won't center horizontally. The code sample below depicts this container with red background. When you maximize the browser, notice the "red" container is left-justified when I want it centered. Applying a margin of auto does nothing. Can anyone help me with this please? Thanks.

<!DOCTYPE html>
<html>
	<title>Notes</title>
	<head>
		<!--<link href="css/notes.css" rel="stylesheet" type="text/css"> -->
		<style>
			html {
				background: #072940;
			}
			
			body {
				width: 85%;
				font-family: Helvetica, sans-serif;
				font-size: 16px;
				margin: 0 auto;
			}
			
			.container { // ***** THIS IS THE CLASS FOR THE CONTAINER
				display: inline-block;
				background: red;
				border-radius: 10px;
				margin: 1em auto;
			}
			
			.menu {
				display: inline-block;
				width: 200px;
				color: black;
				background-color: #EEEEEE;
				border-radius: 10px;
				margin: 1em;
				padding: 1em;
				box-shadow: 10px 10px 8px -3px rgba(0, 0, 0, .3);
				vertical-align: middle;
			}
			
			a {
			    text-decoration: none;
			    color: green; 
			    padding: 5px 10px; 
			    margin-bottom: 2px;
			}
		</style>
	</head>
	<body>
		<div class="container"> <!-- THIS IS THE CONTAINER THAT WON'T CENTER -->
			<div class="menu">
				<p><a href="#">CSS Notes</a></p>
				<p><a href="#">HTML5 Notes</a></p>
			</div>
			<div class="menu">
				<p><a href="#">Ajax Notes</a></p>
				<p><a href="#">DOM Notes</a></p>
				<p><a href="#">Javascript Notes</a></p>
				<p><a href="#">JQuery Notes</a></p>
				<p><a href="#">JQueryUI Notes</a></p>
				<p><a href="#">JSON Notes</a></p>
			</div>
			<div class="menu">
				<p><a href="#">PHP Notes</a></p>
			</div>
			<div class="menu">
				<p><a href="#">MySQL Notes</a></p>
			</div>
		</div>
	</body>
</html>

Open in new window

0
Comment
Question by:elepil
  • 9
  • 7
16 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40203382
Not following you the div is centered, you have the body set to 85% width and auto margin so the container div will be 100% of the body width and sit in the middle of the browser.
0
 

Author Comment

by:elepil
ID: 40203405
Thanks for responding, Gary. Did you try to maximize your browser? If you did, you will see that the red area (which is the container) is not centered. I am testing this with a 1920x1200 resolution laptop, so perhaps resolution matters here.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40203408
I only go up to 1440px
Shouldn't matter the resolution
Remove the width and margins from the body and apply them to the container div and see.
0
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 

Author Comment

by:elepil
ID: 40203431
I did try to remove the width and margins from the body and apply them to the container div, but it didn't produce the desired results.

It may be hard to see my problem with limited resolution because it occurs only when all four .menu items are spread out horizontally. If you do not have sufficient screen real estate to expand the browser beyond the combined widths of all four .menu elements, you won't see the issue.

Please look at the screenshot of the client area of my browser with my browser maximized at 1920x1200 resolution. The dark blue background is the entire width of my maximized browser, and notice that the red area is not centered.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40203433
Missing screenshot
0
 

Author Comment

by:elepil
ID: 40203438
This is what I see with browser maximized.
0
 

Author Comment

by:elepil
ID: 40203440
Sorry, this site handles attachments a bit differently. Clearly I don't do this very often.
0
 

Author Comment

by:elepil
ID: 40203441
You know what, Gary, try removing the 2nd through 4th .menu div tags, and you will see it clearly.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40203455
Still the same for me, I'll try and rustle up some peeps who have a larger screen
0
 

Author Comment

by:elepil
ID: 40203464
Gary, did you try to remove the 2nd thru 4th <div class="menu"> sets?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40203466
Ahhh, I had your commented code in the css.
Remove display: inline-block; from the container class
0
 

Author Comment

by:elepil
ID: 40203482
Removing the display: inline-block simply allows the container to now expand to the right edge of the browser, but that is not what I'm trying to do, that's why I put the display: inline-block to begin with. Let me explain exactly.

I have these four <div class="menu"> within a <div class="container">. I want the div container to wrap around these items "like a glove". What you told me to do merely transferred the gap outside the container to the inside instead. In other words, instead of the entire container looking left-justified, now the menu sections within the container look left-justified.

I want the four .menu sections to always look centered within the container, AND have the container itself center itself in the browser as it is resized. Do you see what I mean?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40203484
You would need to give the container a specific width, there is no other way to center an object that has no specified width.
0
 

Author Comment

by:elepil
ID: 40203489
Let's assume I am willing to forego the movement flexibility of the <div class="menu"> within the <div class="container">. So I add a specific width: 550px within the .container class in the styles. The container still won't center.

Can you show me exactly what you mean?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40203495
Something like this
http://jsfiddle.net/y4DEE/
0
 

Author Closing Comment

by:elepil
ID: 40203503
Oh, I didn't take out the display: inline-block when I added the width, that's why it didn't behave correctly.

Thanks for your help.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Powershell output to email works, but readability is low 5 39
multiple selects 23 49
Copying table data to one another 15 31
Powershell script does not exit 4 29
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

829 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