Horizontally Center <P> Within a Div While Keeping The Text Left-Aligned

Horizontally center p within a div while keeping the text left-aligned

Set your outer div to text-align: center; and your inner p's to display: inline-block;

Fiddle: http://jsfiddle.net/ZL4GM/

CSS: Center block, but align contents to the left

Reposting the working answer from the other question: How to horizontally center a floating element of a variable width?

Assuming the element which is floated and will be centered is a div with an id="content" ...

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

And apply the following CSS

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

Here is a good reference regarding that http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats

CSS: How to center align a list element with left aligned text?

Make the ul an inline-block element and center that. Then left align the text of the li.

.container {  width: 600px;  padding: 2em;  background: #eee;  text-align: center;}
ul {  display: inline-block;  text-align: left;}
.align-center {  text-align: center;}

<div class="container">  <p class="align-center">Center Align Test</p>
  <ul>    <li>First element</li>    <li>Second element</li>    <li>Finally, the third and final element</li>  </ul>
</div>

How to horizontally align ul to center of div?

Following is a list of solutions to centering things in CSS horizontally. The snippet includes all of them.

html {  font: 1.25em/1.5 Georgia, Times, serif;}
pre {  color: #fff;  background-color: #333;  padding: 10px;}
blockquote {  max-width: 400px;  background-color: #e0f0d1;}
blockquote > p {  font-style: italic;}
blockquote > p:first-of-type::before {  content: open-quote;}
blockquote > p:last-of-type::after {  content: close-quote;}
blockquote > footer::before {  content: "\2014";}
.container,blockquote {  position: relative;  padding: 20px;}
.container {  background-color: tomato;}
.container::after,blockquote::after {  position: absolute;  right: 0;  bottom: 0;  padding: 2px 10px;  border: 1px dotted #000;  background-color: #fff;}
.container::after {  content: ".container-" attr(data-num);  z-index: 1;}
blockquote::after {  content: ".quote-" attr(data-num);  z-index: 2;}
.container-4 {  margin-bottom: 200px;}
/** * Solution 1 */.quote-1 {  max-width: 400px;  margin-right: auto;  margin-left: auto;}
/** * Solution 2 */.container-2 {  text-align: center;}
.quote-2 {  display: inline-block;  text-align: left;}
/** * Solution 3 */.quote-3 {  display: table;  margin-right: auto;  margin-left: auto;}
/** * Solution 4 */.container-4 {  position: relative;}
.quote-4 {  position: absolute;  left: 50%;  transform: translateX(-50%);}
/** * Solution 5 */.container-5 {  display: flex;  justify-content: center;}

<main>  <h1>CSS: Horizontal Centering</h1>
  <h2>Uncentered Example</h2>  <p>This is the scenario: We have a container with an element inside of it that we want to center. I just added a little padding and background colors so both elements are distinquishable.</p>
  <div class="container  container-0" data-num="0">    <blockquote class="quote-0" data-num="0">      <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>      <footer>Tasha Yar about Data</footer>    </blockquote>  </div>
  <h2>Solution 1: Using <code>max-width</code> & <code>margin</code> (IE7)</h2>
  <p>This method is widely used. The upside here is that only the element which one wants to center needs rules.</p>
<pre><code>.quote-1 {  max-width: 400px;  margin-right: auto;  margin-left: auto;}</code></pre>
  <div class="container  container-1" data-num="1">    <blockquote class="quote  quote-1" data-num="1">      <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>      <footer>Tasha Yar about Data</footer>    </blockquote>  </div>
  <h2>Solution 2: Using <code>display: inline-block</code> and <code>text-align</code> (IE8)</h2>
  <p>This method utilizes that <code>inline-block</code> elements are treated as text and as such they are affected by the <code>text-align</code> property. This does not rely on a fixed width which is an upside. This is helpful for when you don’t know the number of elements in a container for example.</p>
<pre><code>.container-2 {  text-align: center;}
.quote-2 {  display: inline-block;  text-align: left;}</code></pre>
  <div class="container  container-2" data-num="2">    <blockquote class="quote  quote-2" data-num="2">      <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>      <footer>Tasha Yar about Data</footer>    </blockquote>  </div>
  <h2>Solution 3: Using <code>display: table</code> and <code>margin</code> (IE8)</h2>
  <p>Very similar to the second solution but only requires to apply rules on the element that is to be centered.</p>
<pre><code>.quote-3 {  display: table;  margin-right: auto;  margin-left: auto;}</code></pre>
  <div class="container  container-3" data-num="3">    <blockquote class="quote  quote-3" data-num="3">      <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>      <footer>Tasha Yar about Data</footer>    </blockquote>  </div>
  <h2>Solution 4: Using <code>translate()</code> and <code>position</code> (IE9)</h2>
  <p>Don’t use as a general approach for horizontal centering elements. The downside here is that the centered element will be removed from the document flow. Notice the container shrinking to zero height with only the padding keeping it visible. This is what <i>removing an element from the document flow</i> means.</p>
  <p>There are however applications for this technique. For example, it works for <b>vertically</b> centering by using <code>top</code> or <code>bottom</code> together with <code>translateY()</code>.</p>
<pre><code>.container-4 {    position: relative;}
.quote-4 {  position: absolute;  left: 50%;  transform: translateX(-50%);}</code></pre>
  <div class="container  container-4" data-num="4">    <blockquote class="quote  quote-4" data-num="4">      <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>      <footer>Tasha Yar about Data</footer>    </blockquote>  </div>
  <h2>Solution 5: Using Flexible Box Layout Module (IE10+ with vendor prefix)</h2>
  <p></p>
<pre><code>.container-5 {  display: flex;  justify-content: center;}</code></pre>
  <div class="container  container-5" data-num="5">    <blockquote class="quote  quote-5" data-num="5">      <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>      <footer>Tasha Yar about Data</footer>    </blockquote>  </div></main>

How can I horizontally center an element?

With flexbox it is very easy to style the div horizontally and vertically centered.

#inner {  
  border: 0.05em solid black;
}

#outer {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

How to center a p element inside a div container?

You dont need absolute positioning
Use

p {
 text-align: center;
line-height: 100px;

}

And adjust at will...

If text exceeds width and goes more than one line

In that case the adjust you can do is to include the display property in your rules as follows;

(I added a background for a better view of the example)

div
{
  width:300px;
  height:100px;  
  display: table; 
  background:#ccddcc;  
}

p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell;   
}

Play with it in this JBin

Sample Image

How do you easily horizontally center a div using CSS?

In the case of a non-fixed width div (i.e. you don't know how much space the div will occupy).

#wrapper {  background-color: green; /* for visualization purposes */  text-align: center;}#yourdiv {  background-color: red; /* for visualization purposes */  display: inline-block;}

<div id="wrapper">        <div id="yourdiv">Your text</div></div>

How can I center a div within another div?

You need to set the width of the container (auto won't work):

#container {
    width: 640px; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

The CSS reference by MDN explains it all.

Check out these links:

auto - CSS reference | MDN
margin - CSS reference | MDN
What is the meaning of auto value in a CSS property - Stack Overflow

In action at jsFiddle.

Horizontally Center <P> Within a Div While Keeping The Text Left-Aligned