What about vertical alignment? #2750

Closed
agis opened this Issue Mar 22, 2012 · 12 comments

Comments

Projects
None yet
8 participants
@agis

agis commented Mar 22, 2012

This is more like a question than an actual issue.

Does Bootstrap have any opinion about vertical aligning elements? Are we maybe going to see any height-agnostic Mixin' for aligning an elements vertically in the middle?

Also, which would be a cross-browser method that you'd guys prefer for this matter? Asking cause vertical-align middle doesn't work in IE.

@adamjgrant

This comment has been minimized.

Show comment Hide comment
@adamjgrant

adamjgrant Mar 22, 2012

I'd like to see that, do you have any code for it?

I'd like to see that, do you have any code for it?

@mdo

This comment has been minimized.

Show comment Hide comment
@mdo

mdo Mar 22, 2012

Owner

Vertically aligning what exactly? Icons and buttons? A fixed-with and fixed-height div? A div with flexible/fluid height?

Owner

mdo commented Mar 22, 2012

Vertically aligning what exactly? Icons and buttons? A fixed-with and fixed-height div? A div with flexible/fluid height?

@adamjgrant

This comment has been minimized.

Show comment Hide comment
@adamjgrant

adamjgrant Mar 22, 2012

I don't know if there is a one-size-fits-all solution with css for this,
but it would be nice to add just a class to divs, buttons, etc. and have
them vertically center within the nearest position:relative parent.

Adam Kochanowicz

Le 22 mars 2012 16:29, Mark Otto <
reply@reply.github.com

a crit :

Vertically aligning what exactly? Icons and buttons? A fixed-with and
fixed-height div? A div with flexible/fluid height?


Reply to this email directly or view it on GitHub:
twitter#2750 (comment)

I don't know if there is a one-size-fits-all solution with css for this,
but it would be nice to add just a class to divs, buttons, etc. and have
them vertically center within the nearest position:relative parent.

Adam Kochanowicz

Le 22 mars 2012 16:29, Mark Otto <
reply@reply.github.com

a crit :

Vertically aligning what exactly? Icons and buttons? A fixed-with and
fixed-height div? A div with flexible/fluid height?


Reply to this email directly or view it on GitHub:
twitter#2750 (comment)

@agis

This comment has been minimized.

Show comment Hide comment
@agis

agis Mar 22, 2012

I'm sorry I didn't made it clear.

I'm talking about vertical centering block elements of unknown height, inside parent elements of which we may or may not know the height. This could be used for images, divs and any other block element.

For example, we can use the vertical-align: middle combined with display:table & display:table-cell for that but as we knkow it doesn't work in IE. So what would be a good solution there that Bootstrap would implement?

I would first of all to hear Bootstrap's opinion on this, what would be a "Bootstrap-way" to do this? And then maybe a Mixin' implemented for that.

agis commented Mar 22, 2012

I'm sorry I didn't made it clear.

I'm talking about vertical centering block elements of unknown height, inside parent elements of which we may or may not know the height. This could be used for images, divs and any other block element.

For example, we can use the vertical-align: middle combined with display:table & display:table-cell for that but as we knkow it doesn't work in IE. So what would be a good solution there that Bootstrap would implement?

I would first of all to hear Bootstrap's opinion on this, what would be a "Bootstrap-way" to do this? And then maybe a Mixin' implemented for that.

@mdo

This comment has been minimized.

Show comment Hide comment
@mdo

mdo Mar 23, 2012

Owner

Vertically, the only solution I know that works every time is one powered by javascript. That said, I don't think we'll add an official plugin for that anyway since it goes beyond the nature of Bootstrap—a base for you to get started.

Owner

mdo commented Mar 23, 2012

Vertically, the only solution I know that works every time is one powered by javascript. That said, I don't think we'll add an official plugin for that anyway since it goes beyond the nature of Bootstrap—a base for you to get started.

@mdo mdo closed this Mar 23, 2012

@adamjgrant

This comment has been minimized.

Show comment Hide comment
@adamjgrant

adamjgrant Mar 23, 2012

I had feared that. (js being the only solution).

Adam
Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On vendredi, mars 23, 2012 at 2:26 AM, Mark Otto wrote:

Vertically, the only solution I know that works every time is one powered by javascript. That said, I don't think we'll add an official plugin for that anyway since it goes beyond the nature of Bootstrap—a base for you to get started.


Reply to this email directly or view it on GitHub:
twitter#2750 (comment)

I had feared that. (js being the only solution).

Adam
Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On vendredi, mars 23, 2012 at 2:26 AM, Mark Otto wrote:

Vertically, the only solution I know that works every time is one powered by javascript. That said, I don't think we'll add an official plugin for that anyway since it goes beyond the nature of Bootstrap—a base for you to get started.


Reply to this email directly or view it on GitHub:
twitter#2750 (comment)

@agis

This comment has been minimized.

Show comment Hide comment
@agis

agis Mar 23, 2012

Makes sense. Thanks :)

agis commented Mar 23, 2012

Makes sense. Thanks :)

@livejamie

This comment has been minimized.

Show comment Hide comment
@livejamie

livejamie Oct 16, 2012

Any recommendations for the JS that does solve this?

Any recommendations for the JS that does solve this?

@in1

This comment has been minimized.

Show comment Hide comment
@in1

in1 Mar 22, 2013

There is a great .css solution for this here: http://css-tricks.com/centering-in-the-unknown/

But, it does require adding another element to help with the centering.

in1 commented Mar 22, 2013

There is a great .css solution for this here: http://css-tricks.com/centering-in-the-unknown/

But, it does require adding another element to help with the centering.

@franverona

This comment has been minimized.

Show comment Hide comment
@franverona

franverona Jun 14, 2013

Maybe I'm a bit late about this, but I found a solution that center vertically any modal dialog:

$('body').on('show', '.modal', function(){
     $(this).css({'margin-top':($(window).height()-$(this).height())/2,'top':'0'});
});

I hope it helps :)

Maybe I'm a bit late about this, but I found a solution that center vertically any modal dialog:

$('body').on('show', '.modal', function(){
     $(this).css({'margin-top':($(window).height()-$(this).height())/2,'top':'0'});
});

I hope it helps :)

@trinzia

This comment has been minimized.

Show comment Hide comment
@trinzia

trinzia Mar 24, 2014

Re Modal Vertical centering: It only knows the height of the modal after it's shown, so you'll need the shown method. Then you still have an issue because it appears and then visibly pops into position. I'll try again tomorrow, but the vertical centering of modal is starting to drag out into a large issue for me.

trinzia commented Mar 24, 2014

Re Modal Vertical centering: It only knows the height of the modal after it's shown, so you'll need the shown method. Then you still have an issue because it appears and then visibly pops into position. I'll try again tomorrow, but the vertical centering of modal is starting to drag out into a large issue for me.

@sergiorb

This comment has been minimized.

Show comment Hide comment
@sergiorb

sergiorb Nov 3, 2015

A little correction to franverona:

var body_height = $('.dashboard-body').height();
$('.comp').css({'margin-top':Math.abs((body_height-$(this).height())/2)+'px'});

sergiorb commented Nov 3, 2015

A little correction to franverona:

var body_height = $('.dashboard-body').height();
$('.comp').css({'margin-top':Math.abs((body_height-$(this).height())/2)+'px'});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment