CODEWITHSUNDEEP
htmlcss
Davis Dimitriov
Davis Dimitriov

Reputation: 4257

Centering and aligning lines of HTML Text

I have a div with variable length lines of text in it. Right now I have something like

<div id="container" style="width: 500px">
  <div>Text Line 1</div>
  <div>Text Line 2 of different length</div>
  <div>Text Line 3</div>
</div>

I can text-align: center the container, but I want each line to be left justified relative to the longest line which is truly centered, as opposed to each line being centered on its own.

Is there an easy CSS way to do this... or should I resort to using tables to lay this out?

Upvotes: 0

Views: 253

Answers (4)

methodofaction
methodofaction

Reputation: 72465

Your html:

<div id="container">
  <span>
    <div>Text Line 1</div>
    <div>Text Line 2 of different length</div>
    <div>Text Line 3</div>
  </span>
</div>

​Your CSS:

#container {
  width: 500px;
  background: #eee;
  text-align: center;
  padding: 10px 0;
}

#container span {
  display: inline-block;
  background-color: #ccc;
}

#container span div {
  text-align: left;
}
​

Demo: http://jsfiddle.net/G6ABA/

Upvotes: 3

Saeed-rz
Saeed-rz

Reputation: 1443

do you set pic or color to div background?
or better i said is it your div width important?
if not maybe this solution can solve your problem:

<div id="someID" style="width: auto; text-align:left;">
 <div>line 1</div>
 <div>line 2 is more longer</div>
 <div>line 3</div>
</div>

Upvotes: 0

Cedric Michel
Cedric Michel

Reputation: 520

use

<span> </span>

and css

width:500px;
text-align:center;
position:absolute;

Upvotes: 0

Sven Bieder
Sven Bieder

Reputation: 5681

That should work:

<div id="container" style="width: 500px; text-align:center;">
  <div style="text-align:left;">
    <div>Text Line 1</div>
    <div>Text Line 2 of different length</div>
    <div>Text Line 3</div>
  </div>
</div>

Upvotes: 0

Related Questions