Centering an image and menu in the middle of an HTML page

I have a school project where I am trying to align both an image and a menu in the center and middle. Here is my code on CodePen: LINK I will also share the code here:

HTML

<header>

<img id="logo" src="https://exampleimage.com/logo.jpg">
<ul id="menutop1">
    <li><a href="#home">Home</a></li>   
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

CSS

body{
    margin: 0;
}

header{
    background-color: #171A21;
    width: 100%;
    height: 200px;
    text-align: center; 
}
#logo{
 width: 250px;
 height: 172px;
}

#menutop1 {
    list-style-type: none;
    overflow: hidden;   
}

#menutop1 li {
    float: left;
}

#menutop1 li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#menutop1 li a:hover:not(.active) {
    background-color: #ddd;
}

The issue I'm facing is that the menu goes under the image and stays to the left of the page. I've tried all possible solutions but couldn't find one that works, can someone please help me out? I'm really stuck.

Thank you for your assistance and apologies for any errors in my English.

UPDATE

Thanks to Kamila O's suggestion, the menu is now positioned next to the image. However, I want it to be centered vertically as well. I added this code:

vertical-align: middle; height: 100%;

to the menu, but I don't think it's the best solution because when I set a background color on the menu just for testing purposes, I noticed this:

LINK

The menu overflows from the div. Does anyone know a better solution for this issue?

htmlcss

Answer №1

To achieve a centered menu, modify the code for #menutop1 li as follows:

#menutop1 li {
  position: relative;
  display: inline-table; 
}

Answer №2

The reason for this issue is due to the float: left property applied to the individual list items in the menu.

To resolve this, simply remove the float property, set the list items to display inline-block, and add a text-align center to #menutop1. This will ensure proper alignment.

#menutop1 {
    list-style-type: none;
    overflow: hidden;   
    text-align: center;
}

#menutop1 li {
  display: inline-block;
}

Check out the updated version on jsfiddle: https://jsfiddle.net/mebxcjwx/4/

Answer №3

Here is a quick solution I put together for you. I created containers for your logo and navigation to give you better control over the elements. I also wrapped the ul element in a tag.

<header>
  <div class="logo">
      <img  src="https://i.vimeocdn.com/portrait/58832_300x300.jpg">
  </div>
  <nav class="main_nav">
    <ul>
      <li><a href="">Home</a> </li>
      <li><a href="">Contact</a></li>
      <li><a href="">About</a></li>
    </ul>
  </nav>
</header>

https://jsfiddle.net/mebxcjwx/9/

By default, the elements take up the full width of the header, causing them to stack under each other. Adding text-align center achieves the desired effect since they are text elements. If you prefer the navigation in the black space, you can remove padding on the header and give the navigation a white background for the effect you want!

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

Utilizing Java to extract dynamically generated content from an HTML page

I have an HTML page that looks like this: <html> <head> <!-- necessary java scripts --> </head> <body> <div id="content"></div> </body> After the page renders, a lot of dynamic html content is placed within ...

javahtmlparsinghtml-parsing

What is the best way to grasp the concepts behind MaterialUI styled components?

Can someone please help me understand how to apply styles to a component using MaterialUI? I've been reading the documentation but it's all very confusing to me. What exactly are classes and how do I connect the const style to the BeerList compon ...

cssreactjsmaterial-ui

css: Positioning divs relative to their parent div

In my design, I want the blue div to be positioned next to the red div without affecting the yellow div's placement. http://jsfiddle.net/pCGxe/ Is there a cleaner way to achieve this layout without resorting to using position:absolute or other trick ...

csslayout

What is the method for extracting an entire space-separated string into a PHP variable from HTML options?

When the select tag fetches options from a MySQL database and assigns a value to a PHP variable for echoing, only the first part of the text is displayed. For example : Option: Vijay Sharma Echo Output: Vijay <select name="facultyname" oncha ...

phphtmlmysqlmysqli

Using jQuery to target multiple div elements sharing a common class that are separate from the currently selected div

I am facing a challenge with a div that has a variable number of specific children that I need to toggle between hide and show. It's difficult to explain, but the following code provides a clear example. <div class="item_content_container"> ...

jqueryhtml

Efficiently incorporating styles and CSS, as well as Bootstrap CDN, into window.print() while utilizing Vue.js

I am trying to print from my Vuejs component and apply CSS and Bootstrap styles to the printed page. Currently, I am using window.print() inside the mounted lifecycle hook as shown below: export default { mounted() { ...

javascriptcssvue.jsbootstrap-4

Here is a unique rewrite:"Adjusting the prop of a Material UI Button component depending on screen size breakpoints can be achieved by utilizing

While using the Material UI Button component, I encountered an issue with conditionally determining the variant of the button based on screen size. Specifically, I want the variant to be 'outlined' on medium and larger screens, and no variant at ...

javascriptcssreactjsmaterial-uimedia-queries

Transforming HTML content in real-time using Express.js

I'm a little uncertain if I understand the concept of Express MVC correctly: If my goal is to create a single page application and dynamically modify the HTML, can Express assist me with this? Or will I only be able to work with static pages that req ...

htmlmodel-view-controllerexpress

I'm trying to figure out how to retrieve data from a JQuery autocomplete response that contains an array. Specifically, I want

https://i.stack.imgur.com/YpuJl.pngThis form field is for entering text input. <span> <img src="images/author2.jpg" width="50" /> //The profile picture displayed here is static but in the database I have a dynamic image. <input class="sea ...

phphtmlarraysajax

Connecting an Angular application to a URL hosted on localhost

I am currently working on an Angular project where one of the links needs to redirect to a different website. During development, this link points to a localhost URL like localhost:4210. However, due to security reasons in Angular, using such URLs is cons ...

htmlangulartypescriptangular-dom-sanitizer

Utilize JSON data fetched from a URL to dynamically populate an HTML content

There is a JSON file located at a URL that looks like this: [{"tier":"SILVER","leagueName":"Tryndamere's Wizards","queueType":"RANKED_SOLO_5x5","playerOrTeamId":"91248124", "playerOrTeamName":"NunoC99","leaguePoints":18,"wins":411,"losses":430,"rank" ...

javascripthtmljson

What steps do I need to take to link my form with Ajax and successfully submit it?

Here is my HTML code: {% extends 'base.html' %} {% block content %} <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create a Recipe ...

javascripthtmlajax

What is the process to include a CSS file in PHP?

Can anyone guide me on how to include my CSS file in PHP? require('config.php'); $cssFile = "style.css"; echo "<link rel='stylesheet' href='/books/style.css'>"; What is the process of adding CSS to a PHP appl ...

phpcss

What is the best way to make the button cover the entire width?

I have a Vuetify card with a layout where I am rendering some dynamic Vuetify components inside the card based on checkbox selection. These components can be a divider, a spacer, toolbar, or a button. However, I'm struggling to make the buttons span t ...

javascriptcssvue.jsvuetify.js

Retrieve information from an HTML input field that does not have an assigned ID or name

I am facing a challenge with an HTML table that contains multiple inputs which do not have any id or name attributes. I need to retrieve data from these inputs but struggling due to the lack of identifiers. Upon inspecting the DOM, I noticed that each inp ...

htmlgoogle-chromedominputelement

Retrieving form data in Servlet

Just began working with servlets and encountered an issue. I am trying to upload a file to my server using a servlet, while also sending a text value (the file name) to be changed on the server side. The problem arises when I submit the form data to the se ...

javajqueryhtmlajaxservlets

Using the "unicode-range" property for numerical values

Having incorporated a custom font using @font-face, I am attempting to showcase text in two different languages on a webpage with distinct fonts utilizing the font-face at rule in CSS and employing the unicode-range property. While the text appears corre ...

htmlcsslocalizationfont-facenumber-formatting

Unusual Display of Mantine Radio Button

I am currently using Mantine v7.0.0 in combination with Next.js v13.5.2 and Tailwind v3.3.3. In my setup, when I create <Radio /> elements, the svg of the element is appearing separately from the radio button instead of replacing it. This issue can b ...

cssnext.jstailwind-cssmantine

Retrieve a particular HTML element from an object that has been mapped

After reproducing my issue on a smaller scale for easier handling, I am now aiming to implement an onclick function that reveals the hidden content inside each column. The plan is to initially hide the content using display: none and then switch it to disp ...

javascripthtmlcssreactjs

Is there a way to include all images from a local/server directory into an array and then utilize that array variable in a different file?

I'm currently using Netbeans version 8.0.1 with PHP version 5.3 Here is a PHP file example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/199 ...

javascriptphphtmlarraysnetbeans