Text-Align: -Webkit-Center Vs Text-Align: Center

What is the difference between using `text-align:center` and `margin: 0 auto` to center an element in CSS?

First, there is no "align: center". What you're thinking of is "text-align: center", and that detail — the prefix "text-" — is a hint as to what the problem is. The "text-align" property is for inline elements being laid out in blocks. When you're trying to center a block-level element in some content, an inline layout style does not make sense.

The (now deprecated) align attribute on elements is not a CSS thing; it's a throwback to the days of yesteryear.

Now, as to vertical alignment, sadly the answer is "no," at least in practical terms. The trick with "margin: auto" won't work. Vertical alignment with nothing but CSS is challenging, to put it mildly. There are many different situations and techniques to use. Here's an interesting (if a little old) page on the subject: http://www.student.oulu.fi/~laurirai/www/css/middle/

edit from the future — Anybody trying to do vertical centering should be keeping an eye on the availability of flexbox layout.

table elements acts different with align=center vs css text-align: center;

Semantically (and technically) speaking, text-align should only be used to align inline level elements, of which a table is not.

The align property on a table doesn't refer to text but to

align

This enumerated attribute indicates how the table must be aligned inside the containing document.

---

As per the table docs above, align has been deprecated, and it is suggested that you do indeed use margin:0 auto; to "center" a table element

Usage Note

Do not use this attribute, as it has been deprecated. The <table> element should be styled using CSS. Set margin-left and margin-right to auto or margin to 0 auto to achieve an effect that is similar to the align attribute.

What's the difference between text-align:start and text-align:unset?

Basing this answer off your edit that you meant initial and not unset:

In the case of text-align, as far as I know all elements currently present in HTML default to start as their initial value (or equivalent behavior in browsers where the actual start keyword is not supported, see text-align § Specifications), so using text-align:start will basically always give the same result as text-align:initial, assuming you are working with a browser that supports start.

If in the future there is ever a newly implemented HTML element or browser that for some reason defaults things to a text-align value of something other than start, text-align:initial would behave accordingly on that element and I would no longer be able to make the blanket statement that all elements default to start.

Also, in a technical sense start and initial are not identical, because initial is a global value that can be used for all CSS properties to revert them to their default values, so it really isn't the opposite of anything. Even though functionally the result may imply it is, for this reason it would also be technically incorrect to say that initial is the opposite of end.

See also:

• initial
• text-align § Specifications

Bootstrap class=text-center vs. CSS text-align: center

The OP's question seems to have been edited after it was first posted. It essentially asks: whether Bootstrap does anything extra to elements with the class .text-center, in addition to text-align: center;. I also had this doubt and the answer is no. I think this question can be better answered by just looking at Bootstrap's source code:

.text-center {
  text-align: center !important; }

Apparently all that Bootstrap does is to apply one CSS rule: text-align: center !important; to such an element. So yeah they can be considered equivalent.

Behavior of text-align-last vs text-align on Select Tag

The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned.

And

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements, only their inline content.

Under which circumstances textAlign property works in Flutter?

DefaultTextStyle is unrelated to the problem. Removing it simply uses the default style, which is far bigger than the one you used so it hides the problem.

---

textAlign aligns the text in the space occupied by Text when that occupied space is bigger than the actual content.

The thing is, inside a Column, your Text takes the bare minimum space. It is then the Column that aligns its children using crossAxisAlignment which defaults to center.

An easy way to catch such behavior is by wrapping your texts like this :

Container(
   color: Colors.red,
   child: Text(...)
)

Which using the code you provided, render the following :

The problem suddenly becomes obvious: Text don't take the whole Column width.

---

You now have a few solutions.

You can wrap your Text into an Align to mimic textAlign behavior

Column(
  children: <Widget>[
    Align(
      alignment: Alignment.centerLeft,
      child: Container(
        color: Colors.red,
        child: Text(
          "Should be left",
        ),
      ),
    ),
  ],
)

Which will render the following :

or you can force your Text to fill the Column width.

Either by specifying crossAxisAlignment: CrossAxisAlignment.stretch on Column, or by using SizedBox with an infinite width.

Column(
  children: <Widget>[
    SizedBox(
      width: double.infinity,
      child: Container(
        color: Colors.red,
        child: Text(
          "Should be left",
          textAlign: TextAlign.left,
        ),
      ),
    ),
  ],
),

which renders the following:

In that example, it is TextAlign that placed the text to the left.

What do flex and justify-content achieve that text-align doesn't?

Yes there is a big difference. Flexbox is about boxes and block level element whearas text-align is about text and inline level element.

When having one element we won't notice the difference but when it comes to multiple element we can see a clear difference.

Here is a basic example where we have text and button inside a container:

.parent-flex {
  display: flex;
  justify-content: flex-end;
  margin-bottom:10px;
}
.parent-normal {
  text-align:right;
}

<div class="parent-flex">some text here  <button>Awesome button!</button></div>

<div class="parent-normal">some text here  <button>Awesome button!</button></div>

---

Related Topics