Absolute Positioning & Text Alignment

HtmlCss

Html Problem Overview

I would like some text to be centered in the bottom of the screen.

I tried this, but it doesn't work. It looks like absolute positioning conflicts with the alignment.

How could I achieve this simple task ?

Html Solutions

Solution 1 - Html

The div doesn't take up all the available horizontal space when absolutely positioned. Explicitly setting the width to 100% will solve the problem:

HTML

<div id="my-div">I want to be centered</div>​

CSS

#my-div {
   position: absolute;
   bottom: 15px;
   text-align: center;
   width: 100%;
}

​

Solution 2 - Html

Try this:

http://jsfiddle.net/HRz6X/2/

You need to add left: 0 and right: 0 (not supported by IE6). Or specify a width

Solution 3 - Html

This should work:

#my-div { 
  left: 0; 
  width: 100%; 
}

Solution 4 - Html

Maybe specifying a width would work. When you position:absolute an element, it's width will shrink to the contents I believe.

Solution 5 - Html

position: absolute;
color: #ffffff;
font-weight: 500;
top: 0%;
left: 0%;
right: 0%;
text-align: center;

Solution 6 - Html

just add left:0; right:0; or add width

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Python library 'unittest': Generate multiple tests programmatically

PythonTddUnit Testing

Next Solution:

Using VS Code Snippets with Resharper

C#Visual StudioResharperCode Snippets

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMisha MoroshkoView Question on Stackoverflow
Solution 1 - HtmlPär WieslanderView Answer on Stackoverflow
Solution 2 - HtmlEricView Answer on Stackoverflow
Solution 3 - HtmlHappyView Answer on Stackoverflow
Solution 4 - HtmltauView Answer on Stackoverflow
Solution 5 - HtmlSouMitya chauhanView Answer on Stackoverflow
Solution 6 - HtmlRamshinView Answer on Stackoverflow