CSS replacement for <div align=“center”>

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.

Answer 1

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/

Answer 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/

Answer 3

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

Answer 4

    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)

Answer 5

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;
}

Answer 6

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>

Answer 7

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; }