[css-d] Vertical Horizontal Center ?
I've come across many pages how to center a item horizontally and
vertically, one method {margin: 0 auto;} works great, horizontally, not
vertically. I found another solution whereas, all I do is add
{top:50%;translateY(-50%);} to the child, that is not working either ?
[Example https://jsfiddle.net/WildWind/bs84tegs/]
__
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/
[css-d] review please - an existing site made mobile
An existing site made mobile using the mobile last approach; http://www.utrechtsyogacentrum.nl http://www.utrechtsyogacentrum.nl/styles/ Mobile testing please. I have an adroid (4.2.2) phone myself. So tests from iphone and windows phone users are extra welcome! Thanks, Erik __ 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] Vertical Horizontal Center ?
#one {
position:relative;
background-color:blue;
height:350px;
width:350px;
}
.two {
background-color:orange;
height:125px;
width:125px;
position:relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
}
On Wed, Jun 3, 2015 at 8:00 PM, Tom Livingston tom...@gmail.com wrote:
It's:
top:50%; transform: translateY(-50%)
On Wed, Jun 3, 2015 at 7:46 PM, Crest Christopher
crestchristop...@gmail.com wrote:
I've come across many pages how to center a item horizontally and
vertically, one method {margin: 0 auto;} works great, horizontally, not
vertically. I found another solution whereas, all I do is add
{top:50%;translateY(-50%);} to the child, that is not working either ?
[Example https://jsfiddle.net/WildWind/bs84tegs/]
__
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 | medialogic.com
#663399
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
__
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] Vertical Horizontal Center ?
Roger Blanton schreef op 04-06-15 om 02:26: Without knowing the height of the element or parent container I don't think it is possible without using a flex layout with just CSS. This is what i remember too. __ 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] Vertical Horizontal Center ?
I'm confused. You say if you can't use flex, you can't do it. Then you acknowledge the table/table-cell approach exists. So why not use table/table-cell?! On Wed, Jun 3, 2015 at 9:00 PM, Erik Visser e...@erikvisser.net wrote: Roger Blanton schreef op 04-06-15 om 02:26: Without knowing the height of the element or parent container I don't think it is possible without using a flex layout with just CSS. This is what i remember too. __ 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/ -- Ryan Reese __ 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] Vertical Horizontal Center ?
Without knowing the height of the element or parent container I don't think it
is possible without using a flex layout with just CSS.
If you know the height you can do top:50% margin-top: (negative half the
height). Or you can make the parent display table its child display table cell
and vertical align middle.
I run into this issue constantly at my job and if I don't know the height of
the parent or children I usually just use JS to do it since we don't support
flex layout.
—
Sent from Mailbox
On Wed, Jun 3, 2015 at 8:10 PM, Tom Livingston tom...@gmail.com wrote:
#one {
position:relative;
background-color:blue;
height:350px;
width:350px;
}
.two {
background-color:orange;
height:125px;
width:125px;
position:relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
}
On Wed, Jun 3, 2015 at 8:00 PM, Tom Livingston tom...@gmail.com wrote:
It's:
top:50%; transform: translateY(-50%)
On Wed, Jun 3, 2015 at 7:46 PM, Crest Christopher
crestchristop...@gmail.com wrote:
I've come across many pages how to center a item horizontally and
vertically, one method {margin: 0 auto;} works great, horizontally, not
vertically. I found another solution whereas, all I do is add
{top:50%;translateY(-50%);} to the child, that is not working either ?
[Example https://jsfiddle.net/WildWind/bs84tegs/]
__
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 | medialogic.com
#663399
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
__
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/
__
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] Vertical Horizontal Center ?
http://codepen.io/ryanreese09/pen/NqpMYa On Wed, Jun 3, 2015 at 9:02 PM, Roger Blanton rblan...@ltu.edu wrote: Because the table approach only works when you know the height of the elements. Flex will work no matter what Hope that clarifies. — Sent from Mailbox https://www.dropbox.com/mailbox On Wed, Jun 3, 2015 at 9:01 PM, Ryan Reese sportsdude.re...@gmail.com wrote: I'm confused. You say if you can't use flex, you can't do it. Then you acknowledge the table/table-cell approach exists. So why not use table/table-cell?! On Wed, Jun 3, 2015 at 9:00 PM, Erik Visser e...@erikvisser.net wrote: Roger Blanton schreef op 04-06-15 om 02:26: Without knowing the height of the element or parent container I don't think it is possible without using a flex layout with just CSS. This is what i remember too. __ 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/ -- Ryan Reese __ 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/ -- Ryan Reese __ 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] Vertical Horizontal Center ?
It's:
top:50%; transform: translateY(-50%)
On Wed, Jun 3, 2015 at 7:46 PM, Crest Christopher
crestchristop...@gmail.com wrote:
I've come across many pages how to center a item horizontally and
vertically, one method {margin: 0 auto;} works great, horizontally, not
vertically. I found another solution whereas, all I do is add
{top:50%;translateY(-50%);} to the child, that is not working either ?
[Example https://jsfiddle.net/WildWind/bs84tegs/]
__
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 | medialogic.com
#663399
__
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] Vertical Horizontal Center ?
Because the table approach only works when you know the height of the elements. Flex will work no matter what Hope that clarifies. — Sent from Mailbox On Wed, Jun 3, 2015 at 9:01 PM, Ryan Reese sportsdude.re...@gmail.com wrote: I'm confused. You say if you can't use flex, you can't do it. Then you acknowledge the table/table-cell approach exists. So why not use table/table-cell?! On Wed, Jun 3, 2015 at 9:00 PM, Erik Visser e...@erikvisser.net wrote: Roger Blanton schreef op 04-06-15 om 02:26: Without knowing the height of the element or parent container I don't think it is possible without using a flex layout with just CSS. This is what i remember too. __ 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/ -- Ryan Reese __ 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/ __ 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] Vertical Horizontal Center ?
Den 04.06.2015 03:13, skrev Karl DeSaulniers: display:table and vertical-align:middle is one css way http://www.gunlaug.no/tos/moa_15a.html __ 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] Vertical Horizontal Center ?
When you declare margin: 0 auto you're explicitly giving instructions to
not use margin on the top and bottom. If absolute positioning is
acceptable, you can do:
margin:auto;
position: absolute;
top: 0;
bottom:0;
left:0
right:0;
On Jun 3, 2015 7:46 PM, Crest Christopher crestchristop...@gmail.com
wrote:
I've come across many pages how to center a item horizontally and
vertically, one method {margin: 0 auto;} works great, horizontally, not
vertically. I found another solution whereas, all I do is add
{top:50%;translateY(-50%);} to the child, that is not working either ?
[Example https://jsfiddle.net/WildWind/bs84tegs/]
__
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/
__
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] Vertical Horizontal Center ?
Display table/table-cell replicates the table counterparts. You certainly don't need to know a tables height to center it. It's no different in CSS...As my example shows. On Wed, Jun 3, 2015 at 9:04 PM, Ryan Reese sportsdude.re...@gmail.com wrote: http://codepen.io/ryanreese09/pen/NqpMYa On Wed, Jun 3, 2015 at 9:02 PM, Roger Blanton rblan...@ltu.edu wrote: Because the table approach only works when you know the height of the elements. Flex will work no matter what Hope that clarifies. — Sent from Mailbox https://www.dropbox.com/mailbox On Wed, Jun 3, 2015 at 9:01 PM, Ryan Reese sportsdude.re...@gmail.com wrote: I'm confused. You say if you can't use flex, you can't do it. Then you acknowledge the table/table-cell approach exists. So why not use table/table-cell?! On Wed, Jun 3, 2015 at 9:00 PM, Erik Visser e...@erikvisser.net wrote: Roger Blanton schreef op 04-06-15 om 02:26: Without knowing the height of the element or parent container I don't think it is possible without using a flex layout with just CSS. This is what i remember too. __ 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/ -- Ryan Reese __ 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/ -- Ryan Reese -- Ryan Reese __ 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] Vertical Horizontal Center ?
display:table and vertical-align:middle is one css way body style=margin: 0; padding: 0; div style=width: 100%;height: 100%;display: table;position: absolute;text-align: center; p style=display: table-cell;vertical-align: middle;width: 5%;height: 5%;position: relative;margin: 0 auto;padding: 0; img src=# /p /div /body Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jun 3, 2015, at 8:00 PM, Erik Visser e...@erikvisser.net wrote: Roger Blanton schreef op 04-06-15 om 02:26: Without knowing the height of the element or parent container I don't think it is possible without using a flex layout with just CSS. This is what i remember too. __ 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/ __ 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/
