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?
This question is related to
html
css
text-align
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!
Below are the methods which have always worked for me
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 {_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_
}<div class="parent">_x000D_
<div class="child"></div>_x000D_
</div>2. (older method) Using position, margin properties and fixed size
Working example:
.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_
}<div class="parent">_x000D_
<div class="child"></div>_x000D_
</div>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.
Just another example using HTML and CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>
<div class="content">Hello</div>
.content {
margin-top:auto;
margin-bottom:auto;
text-align:center;
}
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;">_x000D_
<div>_x000D_
<p>Paragraph #1</p>_x000D_
<p>Paragraph #2</p>_x000D_
</div>_x000D_
</div>Here is a technique I use that has worked well:
<div>_x000D_
<div style="display: table-cell; width: 100%"> </div>_x000D_
<div style="display: table-cell; white-space: nowrap;">Something Here</div>_x000D_
</div>Source: Stackoverflow.com