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.
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
use text-align:center for div -> this will align text inside div center. include width property in div (i.e. width:200px) and it will work fine.
The CENTER element is deprecated because basically a it's a purely presentational tag rather than structural and is similar to shorthand for 'DIV align=center' which is better handled via CSS.
If you want center align an element, you should use css instead. You can use text-align property of css to change alignment of elements. In this example, I'm using id attribute to set alignment of paragraph. Instead of that, you may use any other css selector like class, tag name or any other indirect selectors.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With