Start text at the center point of the page (CSS, HTML)

Is th开发者_JAVA技巧ere any CSS syntax to start a piece of text at the center point of the page? I know I can use text-align: center to center text, but how could I position the first character of the text in the middle of the page?

<div id="left"></div>
    <div id="right">SomeText</div>

#left
{
 width:50%;
 float:left;   
}

#right
{
 width:50%;
 float:right;   
}

http://jsfiddle.net/ktCb8/43/

You can centre the element (using width and margin: auto;), and then use:

text-indent: 50%;

...to start the first line of the text at the centre-point.

Bear in mind that the 50% is fifty-percent of the parent-element's width, so:

div {
    width: 50%;
    margin: 0 auto;
    text-indent: 25%;
    background-color: #ffa;
}

The width of the div is 50% of that of the body element, therefore 25% is half of the div.

JS Fiddle demo.

If you'd prefer the text to align against the point at 50% of the width, then simply use the margin of the element that contains the text:

div {
    width: 50%;
    margin: 0 0 0 50%;
    background-color: #ffa;
}

JS Fiddle demo.

Why not use something very simple like the below:

<div style="padding-left:50%">
   Test Test
</div>

This will ensure that text is always starts in the middle of the element.

p.start-from-middle {
  padding-left: 50%;
  width: 50%;
  text-align: left;
  display: block;
}

<p class="start-from-middle">Your text</p>

I have an idea..

Try creating a main wrapper div with the following css:

.wrapper_div {
    margin-left:auto;
    margin-right:auto;
    width: 500px;

}

Then a subdiv inside the wrapper div with width 250px and float right. The text inside the div should have text-align:left

(or make wrapper position relative, and the sub div width 50%)

<div style="padding-left:10em; padding-right:10em;">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est 
    provident omnis debitis, qui ad tenetur quo cumque eligendi quas nam fuga 
    sequi temporibus error accusamus aliquid quisquam animi ipsa?</p>
</div>