Left is aligned and the block is centered

HTML & CSS
1

The output of the code below at http://dot.kr/x-test/divCenter.php is centered as I expected but the left is not aligned.

<div style="text-align:center"> 
short text
<br>very long long text line
</div>

In order to make left aligned I write the code below at http://dot.kr/x-test/divCenter1.php.
It is left-aligned as I want, but the block is not centered.

<div style="text-align:center"> 
<div style="text-align:left">
short text
<br>very long long text line
</div>

The code below at http://dot.kr/x-test/divCenter1.php is another trial for my target output but its output is not what I wanted.

<center> 
<div style="text-align:left">
short text
<br>very long long text line
</div>
</center>

The code below at http://dot.kr/x-test/divCenter3.php produce what I wanted, but it uses table.

<center> 
<table>
  <tr>
    <td style="text-align:left"> 
short text
<br>very long long text line
    </td>
  </tr>
</table> 
</center>

How can I get my target result at http://dot.kr/x-test/divCenter3.php without table?

2

First of all don’t use CSS in your html elements. Try to center the following way:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.test {
	width: 200px;
	margin: 10px auto 0;
	font-family:Arial, Helvetica, sans-serif
	font-size: 12px;
}
</style>
</head>

<body>
<div class="test">
short text
<br>very long long text line
</div>

</body>
</html>

or


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

body {
	text-align: center;
}

.test {
	font-family:Arial, Helvetica, sans-serif
	font-size: 12px;
	text-align: left;
	display: inline-block;
}
</style>
</head>

<body>
<span class="test">
short text
<br>very long long text line
</span>

</body>
</html>