give a div with "text-align: center" a "text-align: left" for wrapped contents only

Question

Using CSS or JQuery (CSS preferred),

Is it possible to take a div (of 100% width), with its contents centered, and align any contents that wrap to the left?

Imagine a set of icons centered on your browser. If you reduce the width of your browser, instead of having wrapped icons displaying in the center of the second line, I would like them to align left.

I have tried searching here before posting, but couldn't find anything that exactly matches my question.

Update:

@Explosion Pills solved it, but here is an updated JSFiddle that addresses browsers other than IE and Chrome by adding word-wrap: pre-wrap; to the outer div: http://jsfiddle.net/etY4r/2/

Answer 1

You can do this with just CSS (and quite simply). The outer div can be text-align: center and the inner div (containing the icons) text-align: left with display: inline-block:

http://jsfiddle.net/ExplosionPIlls/etY4r/

The inline-block elements are centered in the context of the entire div, but when you decrease the window size enough it will cause the elements to wrap inside of the inner element itself and they are aligned to the left.

Answer 2

 $('.class').css('css property','alignment');

Example:

$(document).ready(function(){
   $('.myClass').css('text-align','left');
   $('.myClass2').css('text-align','center');
   $('.myClass3').css('text-align','right');
});

.css() works with any css property in this format :D