Align contents inside a div

Asked 26/3, 2009 at 5:35 Answered 4/9, 2019 at 5:53

169

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?

Freddyfredek answered 26/3, 2009 at 5:35 Comment(2)

Give us more info please? past the code which is not working in other browsers. – Bewick 26/3, 2009 at 5:41

You should give an example of your markup so people know what you're trying to do. Otherwise, your question is ambiguous. – Evaporimeter 26/3, 2009 at 5:41

236

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

Foy answered 26/3, 2009 at 5:46 Comment(2)

If you don't know the div width, which is often the case, this solution works perfectly in all browsers: matthewjamestaylor.com/blog/… – Wildeyed 28/1, 2010 at 8:35

I used <div style="width: 100%; margin: 0 auto;">Hello</div> – Longtin 9/8, 2017 at 7:26

<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

Araxes answered 27/10, 2016 at 15:7 Comment(3)

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Kaciekacy 29/10, 2016 at 10:40

Sorry , Above code will align a div center with in the parent content – Araxes 23/11, 2016 at 12:25

IDK why is it named text-align when it aligns everything to the centre 🤣 – Asaasabi 5/7, 2022 at 16:41

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:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

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

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

Working example:

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

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

Tamarin answered 4/9, 2019 at 5:53 Comment(0)

You can do it like this also:

HTML

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

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.

Rosen answered 22/12, 2012 at 19:46 Comment(0)

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!

Ambiguous answered 4/8, 2013 at 18:21 Comment(4)

But how does that work for responsive pages? This is the worst solution IMO :-( – Feriga 6/1, 2021 at 9:45

@Feriga I’m assuming that for this colloquial term of responsive pages, you mean some type of scrollable content site? You can always show and hide divs at certain viewport or scrollbar positions using a bit of code and some simple math. Seems to work great for the people who upvoted – Ambiguous 6/1, 2021 at 14:15

If you don't know for what screen sizes or orientations you will be developing, you aren't gonna be helped with having hardcoded pixel widths in both your CSS and HTML. If you're making a desktop site and can guarantee the resolution and aspect ratio and will not dynamically rescale, then this might provide a solution! – Feriga 6/1, 2021 at 14:55

@Feriga It doesn’t have to be hardcoded. I was merely trying to demonstrate a solution that works well. You can simply scale the image and its CSS programmatically based on either the browser’s width or its height, whatever you please – Ambiguous 6/1, 2021 at 15:1

Here is a technique I use that has worked well:

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

Summertime answered 11/6, 2015 at 12:0 Comment(0)

All the answers talk about horizontal align.

For vertical aligning multiple content elements, take a look at this approach:

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

Irwinirwinn answered 10/11, 2018 at 15:14 Comment(0)

-2

Just another example using HTML and CSS:

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

Contemplate answered 17/8, 2012 at 13:6 Comment(2)

None of what you wrote is specific to ASP.NET. It is just HTML and inline CSS. Did you mean to write out a server control with properties? – Overhang 4/9, 2012 at 1:25

Fixed. The answer now mentions the correct technologies. – Hexose 16/4, 2017 at 23:0

Recommended topics

Hot tags