jQuery move floated elements to center

If you want to place floated content to center you should:

  • wrap floated elements;
  • count the the "new width" = sum of widths of children elements;
  • set the width of the wraped parent element as the "new width";

HTML code:

<div class="to_center">
	<div class="floated">floated text</div>
	<div class="floated">floated text</div>
	<div class="floated">floated text</div>
</div>

CSS code:

.to_center {margin-left:auto; margin-right:auto;}
.floated {float:left;}

jQuery code:

jQuery(function($){
	$('.to_center').each(function(){
		var new_width = 0;
		$(this).children('.floated').each(function(){
			new_width += $(this).width();
		});
		$(this).width(new_width);
	});
});

Note: The sum of widths of your children elements should not exceed the width of the global wrapper or, in the other words, children elements should fit in one line.

Leave a Reply

Your email address will not be published. Required fields are marked *