<!DOCTYPE html>
<html>
<head>
<title>HTML demo</title>
</head>
<body>
<div style="text-align:left;">
A B C D E F G
</div>
<div style="text-align:center;">
D
</div>
</body>
</html>
What should I do if I want the second element D is right below (centered) A B C D E F G?
My way, the D is at the center of the webpage.
>Solution :
put both of them inside an inline-block element:
<!DOCTYPE html>
<html>
<head>
<title>HTML demo</title>
</head>
<body>
<div style="display:inline-block">
<div style="text-align:left;">
A B C D E F G
</div>
<div style="text-align:center;">
D
</div>
</div>
</body>
</html>