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 · 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_

.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_

<div class="parent">_x000D_
  <div class="child"></div>_x000D_
</div>

_x000D_

2. (older method) Using position, margin properties and fixed size

Working example:

_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_

<div class="parent">_x000D_
  <div class="child"></div>_x000D_
</div>

_x000D_

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

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    lt div style  width  50   margin  0 auto   gt Hello lt  div gt    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    lt div style  text-align  center  gt       lt div style  width  50   margin  0 auto  text-align  left  gt Hello lt  div gt   lt  div gt     Obviously  styles are best put inside a stylesheet  but the inline version is illustrative

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

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

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

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

[html] Align contents inside a div

Examples related to html

Examples related to css

Examples related to text-align