How to equally space an element between two elements from a header in HTML and CSS-CodePudding

I have a header that includes a logo and a logout link. The header is in an external page which I include using the tag. I then have a title in the HTML file under the tag. I want to centre the title automatically so that it is even space between the end of the logo() element and the logout() element. Such that:

LOGO< equal spacing >TITLE<equal spacing>LOGOUT

Here is what my code looks like right now:

Styles.css:

* {
    background-color: black;    
    font-family: verdana;
    font-size: 14px;
    color: white;
}
.header{
    position: absolute;
    top: 20px;
    right:10px;
}
h1{
   text-align: center;
    font-size: 45px;
    align-content: auto;
    margin-top:10px;
}

header.php

<a href="home.php"><img class = "logo" src="https://images.squarespace-cdn.com/content/v1/5d5a565bed5af400017a2c97/1614516482816-LL1JVIR67NFFN016FNID/THRIVE-LOGO-2_RGB_NEW_WHITE.png?format=1500w" width="300" height="50"alt="Company logo"></a>
  
<div class="header">
    <a href="logout.php?logout">Logout</a>
    
    <p></p>
</div>

set_goal.php

html>
        <head>
        <include src="header.php"></include>
        <h1>Please set your goal and choose your programme type</h1>
        <link rel="stylesheet" href="styles.css">
    </head>

CodePudding user response：

There are more than way for divide 3 or any column. You can see example from here. Also you can use display flex.

Example:

<div class="parent_element">
    <div class="logo">child element 1</div>
    <div class="titile">child element 2</div>
    <div class="logout">child element 3</div>
</div>

<style>
    .parent_element{
        display: flex;
        align-content: center;
    }
</style>

You have made another simple mistake in your set_goal.php file. You have added your header file and h1 tag, that means you have added elements under the head element, this is not valid.

CodePudding user response：

You can use display: flex; and align-content: center; in the header element style. it will center all automatically.

You can also use gap: 1rem; in the header element as well to give the same space between the other elements.

CodePudding user response：

You can use justify-content and align-items together with the display: flex; for get better positioned elements.

You can check this page for more info about display and the property align-items and justify-content:

https://www.w3schools.com/cssref/css3_pr_justify-content.asp

https://www.w3schools.com/css/css3_flexbox_container.asp#align-content