Text centered with the logo but icon on the left of it-CodePudding

I'm working on a project that provided me some pictures of the website look :

As you can see, the logo and the text under are both aligned in the center but the little icon is a bit on the left of the location, how can I do to make it look that way? And also, I want this little icon to not move between my desktop, tablet and smartphone look.

I have tried to use position: absolute, but it's always moving around between desktop and smartphone, it doesn't stay right next to my text. Basically I want this icon to be at the same distance on PC, tablet and phone.

Thanks in advance for all the help you can provide me!

@import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
/* Header */

header {
    box-sizing: border-box;
    height: 4rem;
    padding-bottom: 1rem;
    background-color: white;
}
header h1 {
    font-family: 'Shrikhand', sans-serif;
    text-align: center;
    margin-top: 0rem;
    padding-top: 0.5rem;
}

/* Localisation */

.localisation {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eaeaea;
    height: 2.5rem;
    align-items: center;
    box-shadow: inset 0px 11px 3px -8px #CCC;
}
.localisation p {
    font-size: 15px;
    font-weight: 600;
    color: #4D4D4D;
}
.localisation i {
    position: absolute;
    left: 20rem;
}

<script src="https://kit.fontawesome.com/ec6ba8c4d3.js" crossorigin="anonymous"></script>
<!-- Header -->
    <header>
        <h1>ohmyfood</h1>
    </header>
<!-- Localisation -->
    <main>
        <div >
            <i ></i>
            <p>Paris, Belleville</p>
        </div>

CodePudding user response：

remove the styling on the icon, let flex handle the position of the elements. If you want to create extra space between the icon and text, use css gap (see example).

Also I added flex-wrap: nowrap; so the text wouldn't wrap under the icon when it gets too small

@import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
/* Header */

header {
    box-sizing: border-box;
    height: 4rem;
    padding-bottom: 1rem;
    background-color: white;
}
header h1 {
    font-family: 'Shrikhand', sans-serif;
    text-align: center;
    margin-top: 0rem;
    padding-top: 0.5rem;
}

/* Localisation */

.localisation {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    background-color: #eaeaea;
    height: 2.5rem;
    align-items: center;
    box-shadow: inset 0px 11px 3px -8px #CCC;
}
.localisation p {
    font-size: 15px;
    font-weight: 600;
    color: #4D4D4D;
}
.localisation i {
   
   
}

<script src="https://kit.fontawesome.com/ec6ba8c4d3.js" crossorigin="anonymous"></script>
<!-- Header -->
    <header>
        <h1>ohmyfood</h1>
    </header>
<!-- Localisation -->
    <main>
        <div >
            <i ></i>
            <p>Paris, Belleville</p>
        </div>

CodePudding user response：

    header{text-align: center;}
    /* Localisation */

    .localisation {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #eaeaea;
        height: 2.5rem;
        align-items: center;
        box-shadow: inset 0px 11px 3px -8px #CCC;
    }
    .localisation p {
        font-size: 15px;
        font-weight: 600;
        color: #4D4D4D;
        padding-left: 10px;
    }

     <script src="https://kit.fontawesome.com/ec6ba8c4d3.js" 
     crossorigin="anonymous"></script>
    <!-- Header -->
        <header>
            <h1>ohmyfood</h1>
        </header>
    <!-- Localisation -->
        <main>
            <div >
                <i ></i>
                <p>Paris, Belleville</p>
            </div>
         </main>

CodePudding user response：

Just remove position: absolute; from your .localisation i style.

CodePudding user response：

Just remove the .localization i style because you have given the left alignment.

@import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
/* Header */

header {
    box-sizing: border-box;
    height: 4rem;
    padding-bottom: 1rem;
    background-color: white;
}
header h1 {
    font-family: 'Shrikhand', sans-serif;
    text-align: center;
    margin-top: 0rem;
    padding-top: 0.5rem;
}

/* Localisation */

.localisation {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eaeaea;
    height: 2.5rem;
    align-items: center;
    box-shadow: inset 0px 11px 3px -8px #CCC;
}
.localisation p {
    font-size: 15px;
    font-weight: 600;
    color: #4D4D4D;
}

<script src="https://kit.fontawesome.com/ec6ba8c4d3.js" crossorigin="anonymous"></script>
<!-- Header -->
    <header>
        <h1>ohmyfood</h1>
    </header>
<!-- Localisation -->
    <main>
        <div >
       <i ></i>
            <p> Paris, Belleville</p>
        </div>

CodePudding user response：

Yes but like i said, I want the text to be exactly in the center, if i remove the position absolute or if i put some padding it's always putting the "Paris, Belleville" a tiny bit on the side. It looks like flex: nowrap gap is also knocking the text out of its alignment.