Center Div, Images, Tables and Lists inside Div

Posted on February 2, 2015 by Dan Doicaru in HTML/CSS Category

To center div on page is not that complex as you think, you only need to know some important rules when you are applying CSS. You can also center some other important elements such as image, ul, table and even div inside div.

I will write all the cases you need in sections to understand the code better. All live examples can be found at the bottom of the article.

General CSS Rules and Common Problems

If you want to center div or any element that is inside another element you will need to know some important rules. There are some CSS properties that together won't work the way they should. Below I will explain some cases.

Do not use float on elements

Using float on elements inside the div you want to center, will disable text-align property and width will because the same as the elements inside. Float can also break your page styling if is not used correctly.

Auto margins with float and fixed width

Using a fixed width and auto left and right margins with float, will disable the margins and your div will be positioned to left or right, depending on your float property.

Now enough with the problems, let me show you how you center div and other elements such as tables, images and lists.

Center Div on Page (Horizontally)

When you create your own website, in most of the cases, you will need a global container that will center the header, content and footer. Check the example below:

<div class="pageCenter">
	<div class="headerContainer"></div>
</div>

<div class="pageCenter">
	<div class="bodyContainer">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas saepe porro nostrum!</p>
	</div>
</div>

<div class="pageCenter">
	<div class="footerContainer"></div>
</div>

As you can see the div with the class pageCenter should only have a fixed width, without any float and margin left and right auto, to appear in the center of the page together with the other inner containers. For example:

.pageCenter {
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
	float: none;
}

Center Image in Div

The easiest way to center image in div, which everybody I think knows it, is to add text-align: center to the parent container.

There is one more way to center image in div, by using display block and margin auto, but if you are using a linked image, the block display will cause the link to have the same width as the image, which means the link will appear in the blank space of the image too. All elements that uses display block will become full width inside a container. Check the sample below.

-------------------- HTML --------------------

<div class="pageCenter">
	<div class="headerContainer">
		<a href="http://html-tuts.com/"><img src="http://i57.tinypic.com/2enngaa.jpg" /></a>
	</div>
</div>

<div class="pageCenter">
	<div class="bodyContainer">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas saepe porro nostrum!</p>
	</div>
</div>

--------------------- CSS ---------------------

.pageCenter {
	margin-left: auto;
	margin-right: auto;
	max-width: 600px;
	float: none;
	border: 1px solid red; /* Added red border to see the div better */
}
/* Uncomment this to center the image normally and delete the styles applied on image
	.headerContainer {
		text-align: center;
	}
*/
.headerContainer img {
	display: block;
	margin: 0 auto;
	width: auto;
}

Center Image inside Div

Center Ul in Div

To center a list (ul) inside a div, all elements (ul and li) must have inline-block display and your list must be inside a container with text-align: center. Also do not add any float to your list elements. Check the sample below.

-------------------- HTML --------------------

<div class="container">
	<ul>
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
	</ul>
</div>

--------------------- CSS ---------------------

.container {
	text-align: center;
	border: 1px solid green;
}
.container ul {
	border: 2px solid red;
	display: inline-block;
	margin: 10px 0;
	padding: 2px;
}
.container li {
	display: inline-block;
}
.container li a {
	display: inline-block;
	background: #444;
	color: #FFF;
	padding: 5px;
	text-decoration: none;
}

Center Ul in Div

Center Table in Div

To center a table inside a div, you must either add the attribute align="center" to your table, or add margin auto via CSS as tables already have the width attribute set to auto by default. If you will add 100% width, automatically your table will be wider as his container. Also text-align: center won't have any effect here. You have a demo below.

-------------------- HTML --------------------

<div class="container">
	<table align="center">
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
		<tr>
			<td>Table Cell Row 2</td>
			<td>Table Cell Row 2</td>
			<td>Table Cell Row 2</td>
		</tr>
	</table>
</div>

--------------------- CSS ---------------------

.container {
	text-align: center;
	border: 1px solid green;
	padding: 5px;
}
.container table {
	border: 1px solid red;        
	/* You can also uncomment this and remove the align="center" attribute    
		margin: 0 auto;
	*/
}

Center Table inside Div

Center Div inside Div

There are 2 different ways to center div inside another div. First one is set a fixed width to your containers and give them margin auto, without any float. The second one is another story. For example you will have a div with absolute position and you want to center it inside another container with relative position. How you will do that?

Center Div With Absolute Position Inside Div

The trick to center div with absolute position is to set the left property to 50% and negative margin-left with the half width of your container. Let me show you an example on how do I center div very simple.

-------------------- HTML --------------------

<div class="pageCenter">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem error, minus accusamus sed. Asperiores, repudiandae excepturi eius iste eaque saepe.
	
	<div class="absoluteContainer">
		This centered container has absolute position with a fixed width. Created by <a href="http://html-tuts.com/">HTML-TUTS.com</a>.
	</div>
</div>

--------------------- CSS ---------------------

.pageCenter {
	margin: 0 auto;
	max-width: 500px;
	position: relative;
	border: 1px solid brown;
}
.absoluteContainer {
	position: absolute;
	left: 50%;
	top: 10px;
	width: 200px;
	margin-left: -100px;
	border: 1px solid red;
	background: #FFF;
}

Conclusion

As a final note, as you can see, there are several ways to center div or any other elements in your page or inside another container. It only depends on your needs. If I forgot something above, leave a comment below and let me know.

Related Articles
Comments
  1. Rahul Nayak says:

    Hi, I was trying to get a list in center of a bigger div but with the above solution, I could only get it horizontally centered. How do I center it vertically as well? Bigger div height I have kept as 100px.

    • Hello Rahul,

      I wrote you a live sample here http://codepen.io/pen/EPvdPw on CodePen. You can use a div container and inside it you can either have another div or you can use :before to center the content vertically:

      .alignVertical {
      	display: inline-block;
      	height: 100%;
      	width: 0;
      	vertical-align: middle;
      }

      And under that div you must have the content you want centered:

      ul {
      	font-size: 14px;
      	vertical-align: middle;
      	display: inline-block;
      	text-align: left;
      }

      Do not forget to give font size 0 to the main wrapper, as non-inline elements have some invisible space between them and it will brake the alignment. Hope this helps.

      .verticalContainer {
      	text-align: center;
      	width: 100%;
      	height: 100%;
      	font-size: 0;
      }
      • Rahul says:

        Hi Dan,

        Thanks a ton for your quick reply. I have just started learning CSS. A little naive here so I will come back with many and sometimes stupid questions. Here are a few:

        1. I did not understood how div with class .alignVertical helped. I mean you created and closed it without adding any content inside it.
        2. How font-size: 0; helped in alignment. To me, it only reduces the font size of element to 0 hence making it invisible to the users.

        Thanks again,
        Rahul

        • Hello again Rahul,

          I will try to give you simple answers so you can understand:

          1. The empty div is exactly like a vertical line (without width, but 100% in height), so elements can stick together to that full height line.
          2. The null font size will reduce the font to 0 yes, as you said, but it will reduce the blank space between elements too. You can give a bigger font size to the div or ul with the text inside it.

  2. Peter says:

    Thanks a lot. I was struggling for quiet some time to get a ul centered in a div. This tutorial explains perfect how to solve this problem. Thanks again.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


1 + 4 =

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.