Simple layout alignment problem

[dave007]

Hi all.
This is such a simple, and I assume a common design,
I am embarrassed to ask, but I can't get it working!

A couple of images paint a 1000 words ( or 2 ) :

Without the logo-image: Headline is nice and centred:



With the logo-image: Headline is pushed right, yuk!


So, this is my HTML (embedded in php) :
Maybe the <div id='brandInfo'> </div> is unnecessary ?
BUT, I want the phone number in that top right position.
Needs to be responsive for desktop and mobiles.

echo "<header>
    <div id='headerSection' style='background-color: $secondary_color;'>
        <img id='displayedLogo' src='$logoPath' alt='App Icon' class='app-icon'>
        <div id='brandInfo'>
            <span id='companyPhone' style='color: $primary_color;'>$company_phone</span>
            <h1 id='disp_brand_name' style='background-color: $secondary_color; color: $primary_color;'>$header_text</h1>
        </div>
    </div>
</header>";

I won't post the CSS detail, because it is obviously wrong and a fresh start may be best.

#headerSection {
}

#displayedLogo {
width: clamp(50px, 15vw, 100px); /* Responsive logo size */
}

#brandInfo {
}

#disp_brand_name {
 font-size: clamp(1.5rem, 5vw, 2.5rem); /* Responsive font size */
}

#companyPhone {
font-size: clamp(0.8rem, 2vw, 1rem); /* Responsive font size */
}

I hope you can help me get this sorted.

Thanks

 

[menator01]

Here is one way if I understand correct.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            display: flex;
            align-items: center;
            width: 100%;
            background-color: rgb(183, 197, 183);
        }

        img {
            margin-left: 1%;
        }

        h1 {
            margin-left:auto;
            margin-right:auto;
        }
        
        phone {
            margin-right:1%;
            font-style:oblique;
        }
    </style>
</head>
<body>
    <header>
        <img src="images/ratt.png" alt="Logo">
        <h1>The New Headline</h1>
        <phone>(123) 456 - 7890</phone>
    </header>
</body>
</html>

 

[dave007]

<style> header { display: flex; align-items: center; width: 100%; background-color: rgb(183, 197, 183); } img { margin-left: 1%; } h1 { margin-left:auto; margin-right:auto; } phone { margin-right:1%; font-style😱blique; } </style>

Thanks for the reply, much appreciated.

I tried the code and I get this result:



From this we can see that the "The New Headline" is probably centred between the image and the phone number, but I was really wanted it to be centred within the header, so that it lines up with the Sin In and Sign Up buttons.

Is that not possible?


My present version is like this:



Ideally, I'd like the "T" in The New Headline to line up vertically with the left hand edge of the Sign In button. OR to have the "The New Headline" centred in the header. (Currently it is centred within the space remaining after the image. ). I just think it would look better. 🙂 That Sign In button is properly centred. Anyone know how to achieve this ?

 

[Johna]

Hey there! Try giving the image absolute positioning, so that it's not part of the document flow. That would be position: absolute;.

 

[tomliv]

Hey there! Try giving the image absolute positioning, so that it's not part of the document flow. That would be position: absolute;.

This would allow you to center the headline like you are after, however you would need to add padding to the header so as to keep the headline from crashing into the image if the headline runs long.

Having the headline and buttons line up flush left is a bit tricky. Are you trying to make this responsive as well?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }

        header{
            margin-block-end: 25px;

            .wrap{
                align-items: center;
                background-color: bisque;
                display: flex;
                margin-inline: auto;
                max-width: 900px;
                position: relative;

                .photo{
                    flex: 0 0 25%;
                   
                    img{
                        aspect-ratio: 1;
                        display: block;
                        width: 100px;
                        height: auto;
                    }
                }
                .phone{
                    position: absolute;
                    top: 0;
                    right: 0;
                    margin: 0;
                }
            }
        }
        .loginsignup{
           
            .wrap{
                align-items: center;
                background-color: lightgrey;
                display: flex;
                margin-inline: auto;
                max-width: 900px;
                padding: 10px;
                position: relative;

                .space{
                    flex: 0 0 25%;
                }

                .buttons{
                    button{
                        background: none;
                        border: none;
                        color: white;
                        display: block;
                        padding-block: 10px;
                        padding-inline: 20px;
                    }
                    button:first-child{
                        background-color: blue;
                        margin-block-end: 20px;
                    }
                    button:last-child{
                        background-color: green;
                    }
                }
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="wrap">
            <div class="photo"><img src="rocknwool-akAnLCSDoD8-unsplash.jpg" alt=""></div>
            <h1>The New Headline</h1>
            <p class="phone">(123)456-7890</p>
        </div>
    </header>
    <div class="loginsignup">
        <div class="wrap">
            <div class="space"></div>
            <div class="buttons">
                <button type="button">Sign Up</button>
                <button type="button">Sign In</button>
            </div>
        </div>
    </div>
</body>
</html>

This doesn't work on narrow viewports. You'd need to adjust as desired.