Thank you for your input but doing what you suggested has now resulted in both elements being on 1 line whereas before, they were in a block - the image under the h1. I was looking for centering while still in a block display.
With this code, the elements are in a column which is good but the image is stretched completely out to the L and R edges of the browser window and that is not good. Of course, I have no clue why this is so.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HtML lessons in ::before and ::after</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<h1>This Is Trinidad Bolivia</H1>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7YE37jNlabzEmEiEQ9sA5_TL3DbrPiLAxnA&usqp=CAU" alt="">
</body>
</html>
body {
display: flex;
flex-direction: column;
align-items: center;
}
Someone can probably explain this better, but flex-direction: column flips the axis. Normally, justify-content works to align the x-axis, and align-items works on the y-axis. But when you use flex-direction: column, it’s reversed.
I’ve found this site useful. It doesn’t really explain things, but just as quick reference:
Bingo! That was it. It’s not like I didn’t study the flex rules previously. I had, but this quirk of the flipping of the normal applications of -
justify-content
align-itmes
was forgotten.
Another weird feature of the flex system is -
when flex-direction is set to * column-reverse/row-reverse * the flex-start flex-end rules are also reversed. That’s quite a few quirks to keep track of!