oliverzheng/howtocenterincss

CSS generator for centering text/div depending on their size or the container size.

How to Center in CSS

Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.

This is a code generator for your alignment needs.

howtocenterincss's Issues

Add favicon

explain why each method is used when

@oliverzheng filed this issue from https://twitter.com/oliverzheng/status/593167841999724545

react cdn broken for some people

@oliverzheng filed this issue from https://twitter.com/oliverzheng/status/593166712645660672

Disable Generate button until all inputs are filled in

Uncaught Error: Invariant Violation No content

Add a link to create a Github issue below code if there's an error

Show css classes and styles separately and not inline

Use transforms

As in http://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/3/#transforms

Bug: Clicking any unit in "known" selects "px".

• Chrome 64.0.3282.167
• macOS 10.13.3

Under "width / known" and "height / known", if a user clicks the "em" or "%" choices (which are styled to look like radio buttons, but whose markup is deceptively composed of divs), the "px" option is always selected. A second click is required for "em" or "%".

This requires extra attention (and extra interaction) from users.

Thank you.

decimals don't work for line height

@oliverzheng filed this issue from https://twitter.com/oliverzheng/status/593168797458046976

Minimize the js

Add tests

A map of options -> method is probably fine. Browser tests seem exhaustive for this.

Wait for google fonts to load before showing the page

Recommends auto margin method for a div of unkown width

The auto margin method to centre horizontally can only be used on divs of known width. This website incorrectly recommends it for divs of unknown width. The generated code does not work.

Remove global React variable exposed

js fatal

@oliverzheng filed this issue from https://twitter.com/oliverzheng/status/602970443448848384

checkout absolute positioning

@oliverzheng filed this issue from https://twitter.com/oliverzheng/status/593185481958952960

Support for Safari?

Cool site, coming from InDesign etc I was always bemused by how difficult it was to do "simple" layout things in CSS. I didn't test on IE (no Windows box) but Chrome and Firefox produced the output I was expecting, but Safari didn't ...

I don't see any mention of Safari on the site, so perhaps you don't intend to support it? It appears that Safari doesn't support flex. Crappy gif video showing what I mean:

      #app-loading {
        background: white;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items:center;
        font-size: 2em;
      }

Vertically centering in the unknown with table-cell doesn't work

When I input unknown width and height for both container and content I get this output which doesn't center content vertically:

<div style="display:table-cell;vertical-align:middle;">
  <div></div>
</div>

You need to have a wrapping element with display table like this: http://codepen.io/blmstr/pen/OVLarb

Auto scroll down when code is generated

The first time I used the site, I was a bit confused because I couldn't see the code appear below.

Maybe do:

var codeElement = document.getElementById('generated-code')
codeElement.scrollIntoView()

or

document.getElementById('generated-code').scrollIntoView()

Icon for pinning in iOS

Page is not navigable by keypresses (tab, arrow, space).

Because the page is composed mostly of divs rather than inputs, keyboard navigation (by presses of the tab, arrows, and spacebar keys) is not possible.

This slows user interaction, and it would seem to be against ARIA standards.

Thank you.

• Chrome 64.0.3282.167
• macOS 10.13.3

`display: grid; place-items: center` is a new CSS feature

display: flex no longer needs to be relied on to center items. Learn more

Percentage margin-top are calculated with the parent's width, not height.

When centering a 50% box both horizontal and vertical:

But margin-top percentages are calculated from the width of the document, not the height. The vertical alignment does not work.
Instead, just change the top value:
top = (containerheight-contentheight)/2

And do the same width:

show live demo below the generated code

@oliverzheng filed this issue from https://twitter.com/oliverzheng/status/593168063647744000

Make a more offensive version with a different domain name

howtofuckingcenterincss.com
howthefucktocenterincss.com
fuckingcenteringincss.com
centeringinfuckingcss.com
howtocentershit.com
centershitincss.com

Generate code button does nothing

I just tried your nice site, unfortunately the generate code button does not do anything. No code generated, no error message, nothing.

Centering text vertically when height is 100%

While trying to center text vertically when height of the parent is 100%, this code is generated:

line-height: 100%;

Unfortunately that sets the line height to 100% of the font size and not the parent. I propose the following change:

line-height: 100vh;

Which works in most modern browsers.
http://caniuse.com/#search=vh

Add warning about -webkit- CSS prefixes

Convert all tabs to spaces

it is doesn't work

it is should align Center and Middle

but on screen, align is Top and Right. it is wrong

Use the CDN react instead of bundling it

Selecting IE6/7 support can still result in display: table

Except IE didn't support the table display types until IE8.

http://www.reddit.com/r/web_design/comments/31d3oc/a_code_generator_for_centering_various_things_in/

Add the option to have the container shrink to the content's size

It shouldn't be unknown if the outer div wants to be as tall as the inner div.

Link JS/CSS

Optimize on google pagespeed

add comment in css

@oliverzheng filed this issue from https://twitter.com/oliverzheng/status/593202896671363072

Have hashtag urls that can be pasted around (e.g. on stack overflow) that prefills in all the options and generates the code

Feature Request: a Visual Studio Code extension!

This would be AWESOME as a Visual Studio Code extension. Perhaps it could even scan the markup in your current file somehow and automatically set the parameters from your current markup?

Support centering by flexbox

example: http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Usage of centering inside CSS Grid Layout

I might like to specify the width/height of my divs i.e. rows, in fractions.
Is display: grid; compatible with the flexbox rules proposed by the generator?
Is that a good solution?

Translation to portuguese

Would you mind if I fork it and create a portuguese version? 😄

Suggestion for the site

I would like to suggest having a clear all or a clear button on each section. Possibly could be a nice feature. I will fork it if you'd like for me to implement that feature to the site. It would be nice to have something for the user to clear their input since there is a lot of input. Also have you considered doing it in AngularJS to implement a live generation as the user inputs things. No issues with your site though just ideas. :D 👍

Make firefox input field look nicer

https://twitter.com/CodingExon/status/584100241776848897

Add `inline-block` info

To the question:

Content

What do you want to center?

The option "Text" has description Just text, or an inline-level block of text and images. Change inline-level to inline-level and inline-block level or something like that to make it more clear.

Site is currently broken

http://fb.me/react-0.13.1.min.js Failed to load resource: the server responded with a status of 403 (Forbidden)
bundle.min.js:1 Uncaught TypeError: Cannot read property 'Component' of undefined