Elements centering off center using divs in html and css

Question

So I've been working briefly on coding a website and I thought about experimenting with a new style from my normal float right and float left for the header, so I had the idea of having a piece of text floating in the very center and then having a menu icon floating to the right.

I had achieved this using a 3 div elements split on the same line with the first invisible, the second the centered text and then the third the menu icon. This worked nifty as it allowed me to float the menu icon to the right, however an issue arose when I started typing dummy text on the site. I had code that was centering the p element but it had notified me to the issue of the header text being off center. While you could argue that, yes, if you had a chunk of text it wouldn't matter but for the context of this site it does.

Open to changing the methodology such as using something other than 3 div elements etc. For reference I have posted a picture and also it is notable that the text are header elements (h1 & h3) and that the menu icon is temporarily a image.

Code is posted also.

HTML

<div class="header">
    <div class="header-container">
        <div id="dummydiv"></div>
        
        <div id="logo">
            <a href="index.html" id="logo"><h1 id="logo">TEXT</h1></a>
            <h3 id="">"text"</h3>
        </div>

        <div id="menu-icon">
            <img src="img/menu-icon.png" alt="Menu Icon" id="menu-icon">
        </div>
    </div>
</div>

CSS

.header {
background-color:#F0F0F0;
border-bottom:5px solid #A9A9A9;
}

.header-container{
padding-left: 4%;
padding-right: 4%;
box-sizing: border-box;
overflow: hidden;
width: 100%;
min-height: 70px;
display: flex;                  
flex-direction: row;            
flex-wrap: nowrap;              
justify-content: space-between; 
}

#logo {
text-decoration: none;
color: black;
}

img#menu-icon{
    width: 75px;
    cursor: pointer;
    float: right;
    margin: 10px 0;
}

div#logo {
text-align:center;
padding: 20px 0;
}

div#menu-icon {
float:right;
}

Elements centering off center using divs in html and css

0 Answers0