HTML align center with respect to the element, not the webpage layout-CodePudding

<!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.

CodePudding user response：

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>

CodePudding user response：

A second solution: You can wrap a container element around those divs and apply display: inline-flex, flex-direction: column; and align-items: center; to that container.

display: inline-flex, limits the width of the container to the contents, flex-direction: column; places the children below each other and and align-items: center; centers the contents inside the children elements. You won't need the inline text-alignments in this case.

.container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

<!DOCTYPE html>
<html>

<head>
  <title>HTML demo</title>
</head>

<body>
  <div >
    <div>
      A B C D E F G
    </div>
    <div>
      D
    </div>
  </div>
</body>

</html>