Image Not Centered

I thought this code would center both the h1 and the image. Well, it does center the h1 but not the image. Why is that?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Farting Around With ::before and ::after</title>
    <style>
        img{
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        h1  {
            display: flex;
            flex-direction: row;
            justify-content: center;
            color:rgb(16, 115, 201)
        }
    </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>

Hi there,

Flex is best used for the divs that hold the elements you’re positioning, not for individual elements.

<div>
   <h1>This Is Trinidad Bolivia</H1> 
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7YE37jNlabzEmEiEQ9sA5_TL3DbrPiLAxnA&usqp=CAU" alt="">
</div>

Then in CSS:

div {
display: flex;
justify-content: center;
}

That should center everything within the div.

Does that make sense?

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.

darn ! ! forgot to include the code - here it is

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

if you use a flex-direction to say that you want them in a column does it work?

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>

This looks like it does what you want.

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:

Flexbox cheatsheet

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!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.