CSS – float:center;

In Cascading Style Sheets (CSS), the floating style is used to float elements horizontally, this means that an element can either be floated left or right. A floated element will move as far to the left or right as it can inside the parent element. To create responsive web pages that scale well, I need elements to float in the center of the parent element. Although center floats are not supported directly in CSS, CSS can be used to center float. The parent element simply applies “text-align: center” and the child applies “display inline-block”. Further styling can set margins, padding, and other attributes as usual.

HTML

< div class=”parent”>

<div class=”child”>

1

</div>

<div class=”child”>

2

</div>

</div>

CSS

.parent { text-align: center;}

.child {display:inline-block;}

Result

1
2