EN VI

Html - Flexbox properties applying to text instead of flex container?

How to Html - Flexbox properties applying to text instead of flex container

I am an inexperienced programmer creating a temperature converter website using HTML and CSS. I am using a container to display the text 'Temperature Converter', which I want to be shown at the top and centre of the webpage. I have come across an issue early in development whilst getting to grips with flexboxes. When using justify-content and align-self within the id of the container, these properties apply to the text within the container instead of the container itself, moving the text to the top and centre of the container.

CSS code:

div {
    display: flex;
}

#title {
    align-self: flex-start;
    justify-content: center;
    background-color: lightgray;
    font: arial;
    text-align: center;
    height: 100px;
    max-width: 400px;
}

HTML code:

<!DOCTYPE html>
<html>
    <head>
        <title>placeholder</title>
        <link rel="stylesheet" href="temperatureConverter.css">
    </head>

    <body>
        <div id="title">Temperature Converter</div><br>
    </body>
</html>

I have tried a few different combinations of flex properties, including justify-self and align-items, as well as moving these to the div portion of the CSS code, none of which are of any help. Similar questions asked here that I have found are not applicable to my problem. I imagine I will have missed something obvious due to my inexperience, but help with moving the container instead of the text would be appreciated.

Solution:

You have one div in your code and it has the id title, so your CSS for div and for #title is all applied to that div. In that div is only text, so the div is the flex container and the text is the flex item. Regularly you would put other elements (divs for example) inside the flex container, so the inner ones are the flex items. To center something horizontally with flexbox, you could use the following code:

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

<body>
  <div>
    Content to be centered horizontally
  </div>
</body>

That code makes the body a flexbox, so the div inside is a flex item. When you add further flex items, they will be displayed to the right of the first flex item by default. As that is maybe not what you want, you could use something like this:

#flexContainer {
  display: flex;
  justify-content: center;
}

<body>
  <div id="flexContainer">
    <div>Headline</div>
  </div>
  <div>Another element, which is displayed below the headline</div>
</body>

If you do not insist on using flexbox, you could simply apply margin: 0 auto; to any element, you want to center horizontally.

h1 {
  width: fit-content;
  margin: 0 auto;
}

<body>
  <h1>Headline</h1>
</body>

I added width: fit-content because by default an h1 element has a width of 100%, so the centering would have no effect.

A simple text-align: center would also work (while keeping the width of 100%):

h1 {
  text-align: center;
}

<body>
  <h1>Headline</h1>
</body>