Re: [css-d] Centering menu items responsively
On 9/5/14, 15:42, J.C. Berry wrote: OK don't judge me - well actually do http://www.xifin.com/solutions/xifin-technology/portals Not fine-tuned but there it is. On Fri, Sep 5, 2014 at 3:38 PM, Jon Reece wrote: On Fri, Sep 5, 2014 at 3:13 PM, J.C. Berry wrote: 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? Since we can't see your actual code, it's hard to say. But, based on your diagram - are you floating the menu items? If so, you might want to try display: inline-block instead. Then, setting left and right margins to auto should give you the centering you want. Here's a quick example, this assumes you are setting a fixed width on the menu items: http://codepen.io/jreece/pen/EKJrd?editors=110 Indeed, inline-block should work. You need to remove the "float" declarations from both the and the though. Applying "display: inline-block;" to the via Web Tools works this end. -- Cordially, David __ 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/
Re: [css-d] Centering menu items responsively
tried that On Fri, Sep 5, 2014 at 3:44 PM, Tom Livingston wrote: > I'm not near a computer but won't text-align:center on the ul work? > > > On Friday, September 5, 2014, J.C. Berry wrote: > >> OK don't judge me - well actually do >> http://www.xifin.com/solutions/xifin-technology/portals >> >> Not fine-tuned but there it is. >> >> >> On Fri, Sep 5, 2014 at 3:38 PM, Jon Reece wrote: >> >> > >> > On Fri, Sep 5, 2014 at 3:13 PM, J.C. Berry >> > wrote: >> > >> >> 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? >> >> >> > >> > Since we can't see your actual code, it's hard to say. But, based on >> your >> > diagram - are you floating the menu items? If so, you might want to try >> display: >> > inline-block instead. Then, setting left and right margins to auto >> > should give you the centering you want. Here's a quick example, this >> > assumes you are setting a fixed width on the menu items: >> > >> > http://codepen.io/jreece/pen/EKJrd?editors=110 >> > >> > >> > -- >> > Jon Reece >> > jon.re...@gmail.com >> > >> > >> >> >> -- >> 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/ > > > > -- > > Tom Livingston | Senior Front-End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com > -- 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/
Re: [css-d] Centering menu items responsively
I'm not near a computer but won't text-align:center on the ul work? On Friday, September 5, 2014, J.C. Berry wrote: > OK don't judge me - well actually do > http://www.xifin.com/solutions/xifin-technology/portals > > Not fine-tuned but there it is. > > > On Fri, Sep 5, 2014 at 3:38 PM, Jon Reece > wrote: > > > > > On Fri, Sep 5, 2014 at 3:13 PM, J.C. Berry > > > wrote: > > > >> 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? > >> > > > > Since we can't see your actual code, it's hard to say. But, based on > your > > diagram - are you floating the menu items? If so, you might want to try > display: > > inline-block instead. Then, setting left and right margins to auto > > should give you the centering you want. Here's a quick example, this > > assumes you are setting a fixed width on the menu items: > > > > http://codepen.io/jreece/pen/EKJrd?editors=110 > > > > > > -- > > Jon Reece > > jon.re...@gmail.com > > > > > > > -- > 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/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ 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/
Re: [css-d] Centering menu items responsively
OK don't judge me - well actually do http://www.xifin.com/solutions/xifin-technology/portals Not fine-tuned but there it is. On Fri, Sep 5, 2014 at 3:38 PM, Jon Reece wrote: > > On Fri, Sep 5, 2014 at 3:13 PM, J.C. Berry > wrote: > >> 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? >> > > Since we can't see your actual code, it's hard to say. But, based on your > diagram - are you floating the menu items? If so, you might want to try > display: > inline-block instead. Then, setting left and right margins to auto > should give you the centering you want. Here's a quick example, this > assumes you are setting a fixed width on the menu items: > > http://codepen.io/jreece/pen/EKJrd?editors=110 > > > -- > Jon Reece > jon.re...@gmail.com > > -- 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/
Re: [css-d] Centering menu items responsively
On Fri, Sep 5, 2014 at 3:13 PM, J.C. Berry wrote: > 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? > Since we can't see your actual code, it's hard to say. But, based on your diagram - are you floating the menu items? If so, you might want to try display: inline-block instead. Then, setting left and right margins to auto should give you the centering you want. Here's a quick example, this assumes you are setting a fixed width on the menu items: http://codepen.io/jreece/pen/EKJrd?editors=110 -- Jon Reece jon.re...@gmail.com __ 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/
Re: [css-d] Centering menu items responsively
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" 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. 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" 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/
