How can I code a logo and company name in the header?
This HTML file provided contains only a header at the top, with a horizontal layout. You can view it here: https://jsfiddle.net/SSteven/yeamz57o/
body {
/* resetting browser defaults */
margin: 0px;
padding: 0px;
}
.clearfix {
overflow: auto;
border: 1px solid red;
background-color: lightgray;
}
.center {
padding: 10px;
text-align: center;
}
.logo {
position: absolute;
left: 0px;
top: 0px;
border: 1px solid blue;
z-index: 1;
}<div class="clearfix center">
<img class="logo" src="Logo_MarksC.png" alt="Logo" width="278" height="100">
<h1>MY COMPANY</h1>
</div>The header includes:
1) The Company logo on the left.
2) The Company name centered horizontally and vertically within the layout.
Current issues to address:
1) Difficulty in achieving perfect vertical centering of the logo within the layout, necessitating manual padding adjustments.
What methods can be implemented for precise vertical alignment of the logo?
2) Utilizing z-index to overlap the logo and Company name ensures perfect horizontal centering of the Company name across the webpage width. However, as the screen size decreases horizontally, the Company name ends up behind the logo due to the overlapping. If the overlap is removed, the Company name shifts off-center when the screen reduces in width, although it prevents the Company name from hiding behind the logo. In this context, I would like to inquire: For a header with a logo on the left and a centered Company name, what represents standard / best practice?