CSS replacement for

Question

I know this question has been asked many times, but I never saw a satisfactory answer. I mean, an answer that actually works.

So, here we go again. Take this jsFiddle: http://jsfiddle.net/KFMyn/3/

If you remove the align="center" from the HTML, what CSS do you need to use to make the result look the same as the original?

The answers I found usually amount to margin:0 auto and/or text-align:center but neither of those have the desired effect of making the result look the same as the original.

Could the person who downvoted this please explain if they did it because they think the answer is too easy, if trying to find good alternatives for deprecated attributes is a waste of time, or something else? Maybe my English isn't good enough? — Mr Lister, Feb 29 '12 at 17:36
In the HTML5 spec, sections 10.2 and 10.3.3 address how browsers are expected to map `
` to CSS. In short, it *is* mostly `margin-right: auto; margin-left: auto` and `text-align: center`, but there are certain nuances. — BoltClock, Mar 23 '15 at 08:40

Paul Sheldrake · Accepted Answer · 2012-03-01T16:37:53.360

30

The text align center covers most of the text elements but a little extra is needed to centre align the table

div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}

http://jsfiddle.net/NYuv8/4/

edited Mar 01 '12 at 16:37

answered Feb 29 '12 at 13:29

Paul Sheldrake

7,505
10
38
50

I believe this is the only way to go. I think the goal in deprecating align="center" was to prevent the centering of text from affecting the position of a DOM object in the flow. – Zoidberg Feb 29 '12 at 13:34
Nice, but not very cross-browser compatible. The results aren't identical in Firefox or Chrome. – Mr Lister Feb 29 '12 at 14:34
@PaulSheldrake The alignment in the table cells. In [my jsFiddle](http://jsfiddle.net/KFMyn/3/), the text in the table is left aligned; in [yours](http://jsfiddle.net/NYuv8/), centered. – Mr Lister Feb 29 '12 at 17:32
I've done some more testing, and it's really only the tables that need special care. The other block elements all behave nicely in a centered div. And `
` itself also doesn't behave the same across browsers, so there's really not much more we can do.
– Mr Lister Mar 01 '12 at 15:42

Andre Loker · Answer 2 · 2012-02-29T13:36:30.487

2

div {width:400px; text-align: center;}
table {display:inline-block;}

Should work as well in addition to Paul's answer.

http://jsfiddle.net/KFMyn/13/

edited Feb 29 '12 at 13:36

answered Feb 29 '12 at 13:34

Andre Loker

8,368
1
23
36

Interesting. I wasn't aware that giving the table a different display value would keep the layout inside it intact. I mean, I always assumed that the ``s would start behaving as if they weren't inside a table at all. That is worth experimenting with a bit! But still, your answer doesn't yield the exact same result as the original code in Firefox and Chrome. – Mr Lister Feb 29 '12 at 14:57
Ah, you're right - the table's content is also centered. I have overlooked that. Normally I'd use auto margins TBH. A simple `td {text-align:left; }` should fix it, though. – Andre Loker Feb 29 '12 at 15:02
Yes, but wouldn't that put you on an endlessly extending path of ever increasing levels of fine tuning your CSS? I mean, my jsFiddle was only a small example, but what if you have a `
` inside the `
`? Then you'd have to put in an extra line of CSS to handle that. Etcetera. But I kind of hoped that there would be a real, finite solution, something that you knew would work as a 100% accurate alternative to that align attribute. That's what my question is after.
– Mr Lister Feb 29 '12 at 18:20
Oh, I see I still had `div > * { margin: 0 auto; }` in my test page. Sorry. Now I took that out, things with margins of their own no longer are a problem. So it's really only the tables that cause trouble. Interesting. – Mr Lister Feb 29 '12 at 18:41

Nishant Singh · Answer 3 · 2019-04-21T10:33:13.800

1

    margin: 0 auto; 
    text-align: center;

Above Code might not be working when you are using bootstrap grids. Here is the quick solution for this using bootstrap 4 and IT WORKS IN EVERY BROWSERS

<div class="row">
  <div class="col-sm-2">
     <div class="customClass mx-auto">
         <p class="text-center"> your text goes here </p>
     </div>
  </div>
</div

you can put any column like col-sm-2, 3, 4.......12

Replacement for Center tag in different situations

1. text-center Works with p, a, button, h tags and more i.e all the tags containing data or text directly

2. Flex It can used to align complete element inside another element, however it has more utilities check documentation for reference

Use can center elements using flex in following manners

display:flex;
justify-content:center;
align-items:center;

Another import property is flex-direction i.e

flex-direction:column
flex-direction:row

Use flex direction according to the type of alignment you want

3. mx-auto (bootstrap class)

edited Apr 21 '19 at 10:33

answered Jul 11 '18 at 13:12

Nishant Singh

1,016
12
15

Using bootstrap, adding "text-center" to the class of an
changes nothing.
– user1944491 Aug 16 '20 at 19:59
Check in dom if styles are applied, also it does not work if h4 is not a block element taking full width of it's parent. – Nishant Singh Aug 16 '20 at 20:57
For the
, I had to add a container
and add 'text-center' to its class list - adding to the
directly did not work. For an tag, I could use 'text-center' in the actual element's class list. Thanks!
– user1944491 Aug 17 '20 at 17:28

score 1 · Answer 4 · answered Feb 29 '12 at 13:33

1

div {width:400px; margin: 0 auto; text-align: center; }
div > * { margin: 0 auto; }

Works for me. But this may not work properly when you have multiple nested dom elements

answered Feb 29 '12 at 13:33

pdu

10,295
4
58
95

1

And will have no effect on absolutely positioned elements. – Purag Feb 29 '12 at 13:36
But it doesn't really matter. Absolute positioning wasn't a concern brought up by the OP so no need to worry about it. – Purag Feb 29 '12 at 13:40
@Purmou Sorry, but I meant my question to be more general than just applying to my little example. So absolute positioning does count. – Mr Lister Feb 29 '12 at 14:42
@pduersteler Your solution almost works on jsFiddle, but jsFiddle does have this massive reset stylesheet that sets all margins to 0. In a real world situation (where `
` and `
– Mr Lister Feb 29 '12 at 14:45

Stephane Lapointe · Answer 5 · 2017-08-29T05:23:00.110

0

Why not just leave it <div align="center"> It still works just fine with all browsers as far as I know. I have plenty of old html and I got to this thread only because my NetBeans IDE is warning me this is obsolete. My guess is the browsers are automatically translating to the correct solution. Same thing with <font size="6">bla bla</font> still works just fine and probably automatically converted to <span style="font-size:36px">bla bla</span>

edited Aug 29 '17 at 05:23

answered Aug 29 '17 at 05:16

Stephane Lapointe

11
1

1

Sure it still works, but formally, constructs like that may stop working at any time. Besides, those things don't work the same way in all browsers. See my own pages about [obsolete elements](http://examples.strictquirks.nl/errors/obsolete-elements.php) and [obsolete attributes](http://examples.strictquirks.nl/errors/obsolete-attributes.php) for some examples of differences you can expect. Differences that don't exist when you use CSS. – Mr Lister Aug 29 '17 at 06:29

score 0 · Answer 6 · answered Jan 14 '19 at 09:24

div { width: 400px; text-align: center; }
table { display: inline-block; }

This should work. Check example here: http://jsfiddle.net/ye7ngd3q/2/

and if you want elements inside table cell left/right aligned then you can define individual classes and assign to element respectively as show below:

HTML

<div align="center">
   A centered div
   <p>A</p>
   <table border="1">
     <tr><td class="align-left">centered</td><tr>
     <tr><td class="align-right">div</td><tr>
   </table>
   <ul><li>A centered div</li></ul>
</div>

CSS

div { width: 400px; text-align: center; }
table { display: inline-block; }
.align-left { text-align: left; }
.align-right { text-align: right; }

Giving a table a different display value has the most horrendous side effects. Besides, it's not necessary at all; see also the accepted answer from 6 years ago. — Mr Lister, Jan 14 '19 at 10:39

score 0 · Answer 7 · answered Feb 29 '12 at 13:38

0

You can try and style the table as well, like this:

div {
    width:400px; 
    margin: 0 auto; 
    text-align: center;
}
div table {
  margin: 0 auto;
}

answered Feb 29 '12 at 13:38

walmik

1,440
2
13
30

CSS replacement for

7 Answers7

Replacement for Center tag in different situations

changes nothing.

, I had to add a container
and add 'text-center' to its class list - adding to the
directly did not work. For an tag, I could use 'text-center' in the actual element's class list. Thanks!

directly did not work. For an tag, I could use 'text-center' in the actual element's class list. Thanks!

Linked

Related

CSS replacement for

7 Answers7

Replacement for Center tag in different situations

changes nothing.

, I had to add a container and add 'text-center' to its class list - adding to the directly did not work. For an tag, I could use 'text-center' in the actual element's class list. Thanks!

directly did not work. For an tag, I could use 'text-center' in the actual element's class list. Thanks!

Linked

Related

, I had to add a container
and add 'text-center' to its class list - adding to the
directly did not work. For an tag, I could use 'text-center' in the actual element's class list. Thanks!