Does it make sense to set text-align: center when centering elements?

[forabi]

I'm trying to achieve this layout:

Everything works, but the text is centered unless I set 'text-align: initial' on the root element.

Here is the code (JSX with inline styles):

import React from 'react';
import Avatar from 'material-ui/lib/avatar';
import Paper from 'material-ui/lib/paper';
import TextField from 'material-ui/lib/text-field';
import RaisedButton from 'material-ui/lib/raised-button';
import Divider from 'material-ui/lib/divider';

const underlineStyle = { display: 'none' };
const style = { marginLeft: 0 };

export default class Home extends React.Component {
  render() {
    return (
      <div className="row middle-xs center-xs" style={{ width: '100%', textAlign: 'initial' }}>
        <Paper className="col-xs-10 col-sm-6" zDepth={1}
          style={{ width: 'auto', padding: 20, margin: 20 }}
        >
          <h2>First things first...</h2>
          <p>Please choose an image and enter your name to continue</p>
          <div className="row">
            <div className="col-sm-3 center-xs start-md" >
              <Avatar size={128}/>
            </div>
            <div className="col-sm-9">
              <TextField hintText="First name" underlineStyle={underlineStyle} style={style} />
              <Divider />
              <TextField hintText="Middle name" underlineStyle={underlineStyle} style={style} />
              <Divider />
              <TextField hintText="Last name" underlineStyle={underlineStyle} style={style} />
              <Divider />
              <TextField hintText="Email address" underlineStyle={underlineStyle} style={style} />
              <Divider />
            </div>
          </div>
          <div className="row" style={{ marginTop: 20 }}>
            <div className="col-xs end-xs">
              <RaisedButton className="col end-xs" label="Continue" primary />
            </div>
          </div>
        </Paper>
      </div>
    );
  }
}

It is not a big deal, but I really cannot see what text-align has to do with centering an element. If someone wants to center the text, they should be able to do that with properties.

[kristoferjoseph]

You have a really good point. Adding a text-align: center came out of a discussion around having containers that only contain text children. I have never really liked it much and feel like it could be removed.

[forabi]

I just checked the layout with Edge and all text is centered even when text-align is reset to initial, so it's either a bug with Edge or text-align: initial has not been implemented yet. It would be nice if we could avoid that.

[kristoferjoseph]

Since I am not deep in on EDGE yet I would very much appreciate a pull request proposing what you feel would work. In my mind I would like to separate the alignment of elements and text, but the CSS spec doesn't work that way so it can be confusing.

[diegoaguilar]

@forabi I assume you installed flexboxgrid with npm, how do you import it at your app?

[forabi]

Actually I did not use npm, I just imported the css file using good ol'

. :)

On Wed, Apr 6, 2016 at 1:25 AM Diego Aguilar Aguilar < [email protected]> wrote:

@forabi https://github.com/forabi I assume you installed flexboxgrid with npm, how do you import it at your app?

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/kristoferjoseph/flexboxgrid/issues/150#issuecomment-206009911

[jochienabuurs]

What's the status on this issue? Doesn't make sense to center align text...

[kristoferjoseph]

ya definitely removing this. Have solidified on the approach of never trying to manipulate user content, just grid classes. Next major version will be aligned with this clearer thinking. Thanks!

[kristoferjoseph]

The issue with IE is that it has not implemented flex alignment. so properties set to flex-start flex-end are ignored. What you are seeing is that it only adheres to text-align, which needs to be overridden. SO my approach from here on out will be that the alignment classes will not work in IE because they have not implemented them and I will let end users add their own text-alignment for IE use cases.

[Kyle-Mendes]

Just wanted to check in on the status of this.

If all it needs is removing the text-align: center lines from src/flexboxgrid.css I'd be happy to do that and submit a PR.