Align contents inside a div

Question

I use css style text-align to align contents inside a container in HTML  This works fine while the content is text or the browser is IE  But otherwise it does not work   Also as the name suggests it is used basically to align text  The align property has been deprecated long back   Is there any other way to align contents in html

User · Accepted Answer

text-align aligns text and other inline content. It doesn't align block element children.

To do that, you want to give the element you want aligned a width, with ‘auto’ left and right margins. This is the standards-compliant way that works everywhere except IE5.x.

<div style="width: 50%; margin: 0 auto;">Hello</div>

For this to work in IE6, you need to make sure Standards Mode is on by using a suitable DOCTYPE.

If you really need to support IE5/Quirks Mode, which these days you shouldn't really, it is possible to combine the two different approaches to centering:

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(Obviously, styles are best put inside a stylesheet, but the inline version is illustrative.)

User · Answer

Honestly  I hate all the solutions I ve seen so far  and I ll tell you why  They just don t seem to ever align it right   so here s what I usually do   I know what pixel values each div and their respective margins hold   so I do the following   I ll create a wrapper div that has an absolute position and a left value of 50    so this div now starts in the middle of the screen  and then I subtract half of all the content of the div s width   and I get BEAUTIFULLY scaling content   and I think this works across all browsers  too  Try it for yourself  this example assumes all content on your site is wrapped in a div tag that uses this wrapper class and all content in it is 200px in width     wrapper       position  absolute      left  50       margin-left  -100px      EDIT  I forgot to add   you may also want to set width  0px  on this wrapper div for some browsers to not show the scrollbars  and then you may use absolute positioning for all inner divs   This also works AMAZING for vertically aligning your content as well using top  50  and margin-top  Cheers

User · Answer

Here is a technique I use that has worked well    x000D   x000D   lt div gt  x000D       lt div style  display  table-cell  width  100   gt  amp nbsp  lt  div gt  x000D       lt div style  display  table-cell  white-space  nowrap   gt Something Here lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt div class  content  gt Hello lt  div gt    content       margin-top auto      margin-bottom auto      text-align center

User · Answer

You can do it like this also   HTML   lt body gt       lt div id  wrapper 1  gt           lt div id  container 1  gt  lt  div gt       lt  div gt   lt  body gt    CSS  body   width  100   margin  0  padding  0  overflow  hidden      wrapper 1   clear  left  float  left  position  relative  left  50       container 1   display  block  float  left  position  relative  right  50       As Artem Russakovskii mentioned also  read the original article by Mattew James Taylor for full description

User · Answer

Just another example using HTML and CSS    lt div style  width  Auto  margin  0 auto   gt Hello lt  div gt

User · Answer

All the answers talk about horizontal align   For vertical aligning multiple content elements  take a look at this approach    x000D   x000D   lt div style  display  flex  align-items  center  width  200px  height  140px  padding  10px 40px  border  solid 1px black   gt  x000D       lt div gt  x000D           lt p gt Paragraph  1 lt  p gt  x000D           lt p gt Paragraph  2 lt  p gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Below are the methods which have always worked for me   By using flex layout model     Set the display of the parent div to display  flex  and the you can align the child elements inside the div using the justify-content  center   to align the items on main axis  and align-items  center   to align the items on cross axis    If you have more than one child element and want to control the way they are arranged  column rows   then you can also add flex-direction property   Working example    x000D   x000D   parent   x000D    align-items  center  x000D    border  1px solid black  x000D    display  flex  x000D    justify-content  center  x000D    height  250px  x000D    width  250px  x000D    x000D   x000D   child   x000D    border  1px solid black  x000D    height  50px  x000D    width  50px  x000D    x000D   lt div class  parent  gt  x000D     lt div class  child  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    2   older method  Using position  margin properties and fixed size  Working example    x000D   x000D   parent   x000D    border  1px solid black  x000D    height  250px  x000D    position  relative  x000D    width  250px  x000D    x000D   x000D   child   x000D    border  1px solid black  x000D    margin  auto  x000D    top  0  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    height  50px  x000D    position  absolute  x000D    width  50px  x000D    x000D   lt div class  parent  gt  x000D     lt div class  child  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[html] Align contents inside a div

Examples related to html

Examples related to css

Examples related to text-align