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 jon.re...@gmail.com wrote: On Fri, Sep 5, 2014 at 3:13 PM, J.C. Berry jcharlesbe...@gmail.com 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 li and the a though. Applying display: inline-block; to the li 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
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/
Re: [css-d] Centering menu items responsively
On Fri, Sep 5, 2014 at 3:13 PM, J.C. Berry jcharlesbe...@gmail.com 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
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 jon.re...@gmail.com wrote: On Fri, Sep 5, 2014 at 3:13 PM, J.C. Berry jcharlesbe...@gmail.com 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
I'm not near a computer but won't text-align:center on the ul work? On Friday, September 5, 2014, J.C. Berry jcharlesbe...@gmail.com 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 jon.re...@gmail.com javascript:; wrote: On Fri, Sep 5, 2014 at 3:13 PM, J.C. Berry jcharlesbe...@gmail.com javascript:; 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 javascript:; -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com javascript:; 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 javascript:;] 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
tried that On Fri, Sep 5, 2014 at 3:44 PM, Tom Livingston tom...@gmail.com 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 jcharlesbe...@gmail.com 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 jon.re...@gmail.com wrote: On Fri, Sep 5, 2014 at 3:13 PM, J.C. Berry jcharlesbe...@gmail.com 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/
