These days in pretty much anything, unless you're still supporting ie6. Do note that the element you're adding it to needs a set fixed width though- harder when it's something like a menu though, I appreciate! The other thing you could look into is CSS3 transforms which can move your element 50% from the left, for example.
For the last two elements you can use :nth-last-child(2) on the parent element if you're supporting IE9 and up, otherwise again you might need to set a class on them both. Centering them both together is harder, but if it's just menu items you're working with I have done so before by wrapping an nbsp; in a span and adding display: none at the right breakpoint. (Copying the main css-d email back in as I realised I forgot to reply all...) - Alex Sent from my iPhone > On 5 Sep 2014, at 08:56 pm, "J.C. Berry" <jcharlesbe...@gmail.com> wrote: > > Is that margin:auto not supposed to work on some browsers? Maybe I am > misusing. When should it work? > > Also, the centering may have another issue: > As the viewport shrinks the centering becomes more difficult with more menu > items, e.g. 5 items > > full > x x x x x > > tablet1024 - how to center this second row with more than one item? > x x x > x x > > > tablet768 - last child works > x x > x x > x > > >> On Fri, Sep 5, 2014 at 12:22 PM, Alex M. <a...@alexm.co> wrote: >> Hey JC, >> >> I'm entirely guessing as I can't see the code for your sure but I would >> imagine the easiest way would be: >> >> Use a media query for tablets (with >> http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ or >> whatever your favourite query is) >> Within that, for the last section set "margin: 0 auto;" either by adding >> another class or by using some sort of ":last-of-type". >> >> Hope that helps! >> >> Alex M >> alexm.co >> >> Sent from my iPhone >> >> > On 5 Sep 2014, at 08:13 pm, "J.C. Berry" <jcharlesbe...@gmail.com> wrote: >> > >> > Hello all, >> > I have 3 menu items that look like this on full width of site >> > >> > X X X >> > >> > If I want to reduce to a phone width I get >> > X >> > X >> > X >> > >> > But what about the in-between (tablet, etc.) alignment? Right now I get: >> > >> > X X >> > X >> > >> > And I want >> > >> > X X >> > X >> > >> > i.e. Centered second row. How can I? >> > -- >> > J.C. Berry, M.A. >> > UI Developer >> > 619.306.1712(m) >> > jcharlesbe...@gmail.com >> > http://www.mindarc.com >> > ------------------------------------------------------------------------------------------------------------------------------------------------ >> > >> > This E-mail is covered by the Electronic Communications Privacy Act, 18 >> > U.S.C. ?? 2510-2521 and is legally privileged. This information is >> > confidential information and is intended only for the use of the individual >> > or entity named above. If the reader of this message is not the intended >> > recipient, you are hereby notified that any dissemination, distribution or >> > copying of this communication is strictly prohibited. >> > ------------------------------------------------------------------------------------------------------------------------------------------------ >> > ______________________________________________________________________ >> > css-discuss [css-d@lists.css-discuss.org] >> > http://www.css-discuss.org/mailman/listinfo/css-d >> > List wiki/FAQ -- http://css-discuss.incutio.com/ >> > List policies -- http://css-discuss.org/policies.html >> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > > -- > J.C. Berry, M.A. > UI Developer > 619.306.1712(m) > jcharlesbe...@gmail.com > http://www.mindarc.com > ------------------------------------------------------------------------------------------------------------------------------------------------ > > This E-mail is covered by the Electronic Communications Privacy Act, 18 > U.S.C. ?? 2510-2521 and is legally privileged. This information is > confidential information and is intended only for the use of the individual > or entity named above. If the reader of this message is not the intended > recipient, you are hereby notified that any dissemination, distribution or > copying of this communication is strictly prohibited. > ------------------------------------------------------------------------------------------------------------------------------------------------ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
