Ways to make elements in HTML center aligned horizontally
Summary
Horizontally centering HTML elements with a known width is straightforward using margin: 0 auto. For elements with an unknown width, a common CSS trick involves setting the parent container to position: relative; left: 50%; float: left; and the inner element to position: relative; left: -50%. Additionally, several patterns exist for centering floating elements, including a variation of the position and float technique, leveraging display: table-cell on list items within a table-like structure, or using display: inline-block on the parent container combined with text-align: center. These methods provide flexible solutions for various centering challenges in web development.
<div class="element">I am<a href="http://www.aiubug.com" target="_blank" rel="external" title=""> bug </a>ï¼</div>
.element{width:960px;margin:0 auto;}
The above codes set the width of the div block and horizontally center align it. It's very easy to implement.
However, if we have some elements we don;t know their width and we still want to center align them. What should we do? The above code is not useful if we don't know the width before we center align them. Fortunately, we can use CSS to achieve what we want with some tricks.
Center align an element with unknown width
html:
<div class="demo-1">
<div class="inner">
<ul>
<li><img src="http://p1.qhimg.com/t01ee9d873b9e3a6529.jpg" alt=""></li>
<li><img src="http://p1.qhimg.com/t01ee9d873b9e3a6529.jpg" alt=""></li>
<li><img src="http://p1.qhimg.com/t01ee9d873b9e3a6529.jpg" alt=""></li>
<li><img src="http://p1.qhimg.com/t01ee9d873b9e3a6529.jpg" alt=""></li>
</ul>
</div>
</div>
css :
.demo-1{clear:both;position:relative;left:50%;float:left;}
.demo-1 .inner{position:relative;left:-50%;text-align:center;}
.demo-1 li{display:inline;}
In above code, the left:50% in .deco-1 will first set the left margin of the demo-1 div to 50% of the web browser window width. For example, if the window width is 1024px, then the demo-1 div will be align at the 512px position. Then for the left:-50% in .demo-1 .inner, the inner div will align -50% left, this means it may move 50% of the width of the inner div to the left. This will make the inner div center align in the browser window.
Center align floating element
Pattern-1 : position+float
html:
<div class="demo-2">
<div class="btn">Button 1</div>
<div class="btn">Button 2</div>
</div>
css:
.demo-2{position:relative;left:50%;float:left;}
.demo-2 .btn{display:inline;position:relative;float:left;right:50%;width:100px;height:26px;margin:0 2px;background-color:green;text-align:center;line-height:26px;}
pattern-2: display:table-cell;
html:
<div class="demo-3">
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">list 3</a></li>
<li><a href="#">List item 4</a></li>
<li><a href="#">list 5</a></li>
<li><a href="#">List item 6</a></li>
</ul>
</div>
css:
<!--[if lt IE 8]>
<style type="text/css">
.demo-3 ul {display:inline-block;}
.demo-3 ul{display:inline; }
.demo-3 ul li{display:inline-block}
.demo-3 ul li{ display:inline;}
.demo-3 ul a{ display:inline-block;}
.demo-3{text-align:center}
</style>
<![endif]-->
.demo-3 {display:table;margin:10px auto;padding:2px;border:1px solid #000;white-space:nowrap;}
.demo-3 ul{display:table-row;white-space:nowrap;}
.demo-3 li{display:table-cell;}
.demo-3 a{display:block;padding:4px 10px;border:1px solid #ff0000;background:#ffffcc;text-decoration:none;}
.demo-3 ul a:hover{background:red;color:#fff;}
pattern -3 : inline-block;
html:
<div class="demo-4">
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">list 3</a></li>
<li><a href="#">List item 4</a></li>
<li><a href="#">list 5</a></li>
<li><a href="#">List item 6</a></li>
</ul>
</div>
css:
.demo-4{text-align:center;}
.demo-4 ul{display:inline-block;*display:inline;zoom:1;}
.demo-4 li{float:left;}
.demo-4 li a{display:block;padding:4px 10px;border:1px solid #ff0000;background:#ffffcc;text-decoration:none;}
.demo-4 ul a:hover{background:red;color:#fff;}
Demo is here!
Lastly, to center align elements in HTML with CSS, these are the ways we usually use. You can propose other ways if you know them.
Source ; http://www.aiubug.com/?p=427
No comment for this article.