How do you align an image at the center of a header?

I'm currently working on a project for my class which involves creating a website to display products. However, I am facing some difficulty in centering the header image on the page. I intend to add a product navigation menu on the left side and therefore want the logo to be centered. Despite trying different methods, like using text-align: center in my code, I have not been successful in centering the logo. Could you please advise me on what changes I should make to achieve this?

header, footer {
  background-color: lightgray;
  border: solid 1px black;
  overflow: hidden;
  padding: 20px 10px;
}

footer {
  padding: 10px;
  border-radius: 3px;
}

body {
  font-family: Segoe UI, Arial, Helvetica, sans-serif;
  font-size: 16px;
  background-color: darkgray;
}

html, body {
  padding: 0;
  margin: 0;
}

.header a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 26px;
  border-radius: 4px;
}

.header .logo {
  text-align: center;
  max-width: 12%;
  height: auto;
}

.header a:hover {
  background-color: #9B9B9B;
  color: #000000;
}

.header a.active {
  background-color: #767676;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }

  .header-right {
    float: none;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Vape Away</title>

  <meta name="description" content="Vape Juice Product Display">
  <meta name="author" content="Jordan">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="wrapper">
    <header class="header">
      <img src="img/logo.png" class="logo">
      <div class="header-right">
        <a class="active" href="index.html">Home</a>
        <a href="contact/index.html">Contact Me</a>
        <a href="about/index.html">About Me</a>
        <a href="wholesale/index.html">Wholesale Options</a>
      </div>
      <!-- ^ header ^ -->
    </header>

  </div>
</body>

</html>

Answer №1

Modify the header by including text-align:center:

header, footer {
  background-color: lightgray;
  border: solid 1px black;
  overflow: hidden;
  padding: 20px 10px;
  text-align:center;
}

.header a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 26px;
  border-radius: 4px;
}

.header .logo {
  text-align: center;
  max-width: 12%;
  height: auto;
}

.header a:hover {
  background-color: #9B9B9B;
  color: #000000;
}

.header a.active {
  background-color: #767676;
}

.header-right {
  float: right;
}
<div id="wrapper">
    <header class="header">
      <img src="img/logo.png" class="logo">
      <div class="header-right">
        <a class="active" href="index.html">Home</a>
        <a href="contact/index.html">Contact Me</a>
        <a href="about/index.html">About Me</a>
        <a href="wholesale/index.html">Wholesale Options</a>
      </div>
      <!-- ^ header ^ -->
    </header>
</div>

Answer №2

You can follow Moize's advice or utilize display flex to tackle your issue.

header,
footer {
  background-color: lightgray;
  border: solid 1px black;
  overflow: hidden;
  padding: 20px 10px;
}

footer {
  padding: 10px;
  border-radius: 3px;
}

body {
  font-family: Segoe UI, Arial, Helvetica, sans-serif;
  font-size: 16px;
  background-color: darkgray;
}

html,
body {
  padding: 0;
  margin: 0;
}

.header a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 26px;
  border-radius: 4px;
}

.header .logo {
  /* text-align: center; */
  max-width: 12%;
  /* height: auto; */
}

.header a:hover {
  background-color: #9B9B9B;
  color: #000000;
}

.header a.active {
  background-color: #767676;
}

.header-right {
  /* float: right; */
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}

.header { /*Taking some lines into the comment section and including this one. */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<div id="wrapper">
  <header class="header">
    <img src="https://static.rfstat.com/renderforest/images/v2/logo-homepage/flat_3.png" class="logo">
    <div class="header-right">
      <a class="active" href="index.html">Home</a>
      <a href="contact/index.html">Contact Me</a>
      <a href="about/index.html">About Me</a>
      <a href="wholesale/index.html">Wholesale Options</a>
    </div>
    <!-- ^ header ^ -->
  </header>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for determining the width of an image and utilizing that measurement as the height in order to create a balanced square image

I am currently facing an issue with my code that is used to retrieve the width of an image which is set in percentages. Although I am able to obtain the width in pixels, I am struggling with correctly inserting the variable into the CSS property value usin ...

Avoid positioning issues when dropping a DIV onto the Canvas

Utilizing the JavaScript code below allows me to drag a DIV onto a canvas. I am currently loading a multi-page PDF, which consists of image files, in a pop-up window and positioning canvas layers over them. In these canvas layers, shapes are then loaded at ...

Responsive Bootstrap table unable to expand div upon clicking

My bootstrap responsive table has a unique functionality that allows specific divs to expand and collapse upon button click. While this feature works seamlessly in desktop view, it encounters issues on mobile devices. CSS .expandClass[aria-expanded=true] ...

A guide on incorporating jQuery alert messages into Angular 2

Whenever I submit a form by clicking on the "send message" button, I want to display an Alert message using jQuery. However, currently, I have to double click for the alert message to appear. How can I make it so that the alert message is shown with just o ...

Utilizing React in conjunction with i18next and incorporating the HTML attribute lang

My website is built using React and i18next, with support for multiple languages. I am trying to change the 'lang' attribute in my HTML page. How can I achieve this? Even though I am using the i18next-browser-languagedetector, the lang attribut ...

Accessing the first child node in JsTree

Is it possible to display only the first child of a list using the JStree plugin to create a tree? For example, if I have a list with 5 children, some of which have nested children, I am looking for a way to display only the first child of each <li> ...

Fixing the problem of horizontal labels in Bootstrap - a step-by-step guide

I am struggling to display the form label on a single line, as it currently appears on two lines. Any suggestions for showing the form label in a single line? https://i.sstatic.net/cXddd.png <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm ...

Show the URL that is added in the v-model inside an HTML container

I am working on developing a tool to build code snippets in Vue. The goal is to have users input a URL into a text box, which will then be automatically inserted into an HTML template. This template can be copied and pasted directly into an HTML document. ...

In Angular, encountering difficulty accessing object members within an array when using custom pipes

Here is a custom pipe that I have created, but I am facing an issue accessing the members of the customfilter array, which is of type Item. import { Pipe, PipeTransform } from '@angular/core'; import {Bus} from '/home/pavan/Desktop/Pavan ...

Preventing access to websites through a web application using JavaScript

I am in the process of creating a web application that enables users to create a list of websites they wish to block, preventing access from their browsers. My goal is to block websites on all browsers, but I have narrowed my focus to Chrome for now. I ha ...

Enhance user experience with a flexbox navigation bar that dynamically adjusts link heights to ensure

I am struggling with making my navbar links the same height and keeping their text vertically centered, especially when they wrap onto multiple lines on a narrow viewport. While I have achieved vertical centering, I am facing difficulties in ensuring that ...

What could be causing the discrepancy in alignment of my hyperlink?

I noticed that in this example the hyperlink is aligned at the bottom compared to the text. Can anyone help me identify the issue and provide a solution? Thank you! ...

The elusive Ajax seems to be slipping through our grasp,

I am currently working on a website app to display the availability of PCs in my University using JSON data from the University website and AJAX. I am facing an issue where it shows all the MACs for the first room, but returns undefined for others. Since t ...

Form a figure using the others

After spending three days attempting to create a dynamic figure within the other figures, the task remains elusive. I tried using THREE.ExtrudeGeometry, but ran into a roadblock: The "tail" should have a radius: Unfortunately, none of the parameters in ...

Are there any tools available to validate incomplete HTML source code?

When I include HTML source code from another party on my web page, I sometimes notice that the returned code is incomplete. For example: <table> <tr valign='top'> <td width=95> <img src='test.jpg ...

The 1st DIV element nudges the content within the 2nd DIV Element, causing it to stretch beyond the screen with 100%

I have gone through several other questions, but I am struggling to integrate the solutions into my problem. My main content DIV is set to 100% height and works perfectly fine until I add another element outside of the DIV towards the top of the browser. ...

Tips for creating a responsive container for mobile and smaller devices using Bootstrap 3

Apologies in advance for the lengthy post, but I welcome any suggestions and ideas. Thank you! I'm facing an issue with my layout breaking when the screen size is below 1200px (images and text drop down). I don't mind if they stack vertically on ...

Text adornments persisting even after formatting removal (underline disappears, but text remains embellished)

I included a link within a div and applied text-decoration: none; to the anchor tag as shown below: Here is the CSS (SCSS) code snippet used: &__link { &:link, &:visited { text-decoration: none; } } And here is the corres ...

Is there a way to apply a blur effect to just the div itself without affecting its contents

<style type="text/css"> .inner-container{ width:400px; height:400px; position:absolute; top:calc(50vh - 200px); left:calc(50vw - 200px); overflow:hidden; } #no-blur{ z-index: 20; } .box{ position:absolute; height: ...

Exploration of the "display: none;" property and loading of content

I am struggling to find concrete information on how "display: none;" affects content loading. I have always believed that certain browsers do not load external resources within content that is styled with "display: none". Is this still inconsistent across ...