Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vertical u-center-block alignment is broken #49

Closed
Psykukumber opened this issue Jun 19, 2016 · 7 comments
Closed

Vertical u-center-block alignment is broken #49

Psykukumber opened this issue Jun 19, 2016 · 7 comments
Labels
documentation enhancement fixed waiting response

Comments

@Psykukumber
Copy link

When i use code like:

<div class="u-center-block">
  <div class="u-center-block__content">Hello Blaze</div>
</div>

i get something like on this screenshot
screenshot_2016-06-20_00-12-33

tested in Chromium 51 and Firefox 47 / Arch Linux
@gregorypratt
Copy link
Member

Maybe I should add this to docs but you need to give the block some height...

@gregorypratt
Copy link
Member

Added some doc help text...if you want to re-open this issue feel free 👍

@Psykukumber
Copy link
Author

Okay, just tried your suggestion

html:

<div class="u-center-block">
  <div class="u-center-block__content">Hello Blaze</div>
</div>

main.css:

.u-center-block {
  height: 100%
}

and what i got:
screenshot_2016-06-20_22-41-19

well, what if i try like this:

main.css:

.u-center-block__content {
  height: 100%
}

and then:
screenshot_2016-06-20_22-42-02

looks little bit better ;)

Maybe i do something wrong?

@Kurre
Copy link

Kurre commented Jun 21, 2016 

.u-center-block {
  height: 100%
}

doesn't really work, if the div doesn't have measurable height (which it doesn't have in this context).

Here's a quick example how you could use it.
Give the outer div a fixed height (in px, em, rem...) or put some content in it.

@Psykukumber
Copy link
Author

Psykukumber commented Jun 21, 2016 •
edited

Unfortunately, this one works perfect for some blocks, but not for entire page.
For example, if i want responsive vertical alignment it's not working.

@gregorypratt
Copy link
Member

Try this:

<body>
  <div class="u-center-block__content">Hello Blaze</div>
</body>

Would you like this to be a separate feature?

u-absolute-center for instance

@gregorypratt gregorypratt reopened this Jun 21, 2016
@Psykukumber
Copy link
Author

Thanks, this one works like a charm.

Would you like this to be a separate feature?

Yes, this makes sense. Also i think this example needs to be added in docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation enhancement fixed waiting response
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Psykukumber @Kurre @gregorypratt