The span element stubbornly refuses to align itself in the center when placed alongside the logo

I am struggling to get the span tag to center itself perfectly in the middle of the logo right beside it. I've been trying different things but can't seem to make it happen.

Here is the code snippet:

/** global styling for elements**/

@import "https://fonts.googleapis.com/css?family=Poppins:400";
* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

span {
  font-family: "Poppins", sans-serif;
  float: none;
  position: relative;
}


/**styling for global classes**/


/** nav styles controlling ul and li properties**/

nav {
  font-family: "Poppins", sans-serif;
  width: 100%;
  height: 80px;
  position: fixed;
  box-sizing: border-box;
  align-items: center;
  min-height: 8vh;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  background-color: #23bebe;
}

nav a {
  font-family: "Poppins", sans-serif;
  text-decoration: none;
}

#nav-bar {
  top: 0;
  position: fixed;
  width: 100%;
}

#header {
  margin: 0;
  padding: 0px;
  display: flex;
  justify-content: space-between;
}

ul {
  display: inline-block;
  flex-direction: row;
  margin-right: 50px;
  margin-bottom: 20px;
  margin-top: 25px;
  letter-spacing: 5px;
  word-spacing: 10px;
  justify-content: space-between;
}

li {
  list-style: none;
  text-decoration: none;
  margin-left: 10px;
  display: inline-block;
  justify-content: space-between;
  position: relative;
}

.logo {
  margin: 10px 8px auto;
  margin-top: 10px;
  padding-top: 10px;
  padding-left: 20px;
}
<!DOCTYPE html>

<head lang="eng">
  <meta charset="UTF-8>
  <meta name="viewport">
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  <title>Drums Company</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400">
</head>

<body>
  <div class="aligned-container">
    <header id="header">
      <!--needs to be id="nav-bar"-->
      <nav id="nav-bar">
        <div class="logo"><img src="https://img.icons8.com/windows/50/000000/drum-set.png" alt="drum set"><span>Drums Company</span>
        </div>

        <div class="nav-container">
          <ul>
            <li><a href="#home" class="nav-link">Home</a></li>
            <li><a href="#about" class="nav-link">About</a></li>
            <li><a href="#products" class="nav-link">Products</a></li>
            <li><a href="#contact" class="nav-link">Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>


  </div>
</body>

/** global styling for elements**/

@import "https://fonts.googleapis.com/css?family=Poppins:400";
* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

span {
  font-family: "Poppins", sans-serif;
  float: none;
  position: relative;
}


/**styling for global classes**/


/** nav styles controlling ul and li properties**/

nav {
  font-family: "Poppins", sans-serif;
  width: 100%;
  height: 80px;
  position: fixed;
  box-sizing: border-box;
  align-items: center;
  min-height: 8vh;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  background-color: #23bebe;
}

nav a {
  font-family: "Poppins", sans-serif;
  text-decoration: none;
}

#nav-bar {
  top: 0;
  position: fixed;
  width: 100%;
}

#header {
  margin: 0;
  padding: 0px;
  display: flex;
  justify-content: space-between;
}

ul {
  display: inline-block;
  flex-direction: row;
  margin-right: 50px;
  margin-bottom: 20px;
  margin-top: 25px;
  letter-spacing: 5px;
  word-spacing: 10px;
  justify-content: space-between;
}

li {
  list-style: none;
  text-decoration: none;
  margin-left: 10px;
  display: inline-block;
  justify-content: space-between;
  position: relative;
}

.logo {
  margin: 10px 8px auto;
  margin-top: 10px;
  padding-top: 10px;
  padding-left: 20px;
}

Can someone assist with this, please? :)

javascripthtmlcssnavbarcentering

Answer №1

To implement this style in your CSS, follow these steps:

.logo img {
  vertical-align: middle;
}

Here is the breakdown of the code:

/** Global styling for elements**/

@import "https://fonts.googleapis.com/css?family=Poppins:400";
* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

span {
  font-family: "Poppins", sans-serif;
  float: none;
  position: relative;
}


/** Global styling for classes**/


/** Styling for navigation - takes care of ul and li font-family**/

nav {
  font-family: "Poppins", sans-serif;
  width: 100%;
  height: 80px;
  position: fixed;
  box-sizing: border-box;
  align-items: center;
  min-height: 8vh;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  background-color: #23bebe;
}

nav a {
  font-family: "Poppins", sans-serif;
  text-decoration: none;
}

#nav-bar {
  top: 0;
  position: fixed;
  width: 100%;
}

#header {
  margin: 0;
  padding: 0px;
  display: flex;
  justify-content: space-between;
}

ul {
  display: inline-block;
  flex-direction: row;
  margin-right: 50px;
  margin-bottom: 20px;
  margin-top: 25px;
  letter-spacing: 5px;
  word-spacing: 10px;
  justify-content: space-between;
}

li {
  list-style: none;
  text-decoration: none;
  margin-left: 10px;
  display: inline-block;
  justify-content: space-between;
  position: relative;
}

.logo {
  margin: 10px 8px auto;
  margin-top: 10px;
  padding-top: 10px;
  padding-left: 20px;
}

.logo img {
  vertical-align: middle;
}
<!DOCTYPE html>

<head lang="eng">
  <meta charset="UTF-8">
  <meta name="viewport">
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  <title>Drums Company</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400">
</head>

<body>
  <div class="aligned-container">
    <header id="header">
      <!--needs to be id="nav-bar"-->
      <nav id="nav-bar">
        <div class="logo"><img src="https://img.icons8.com/windows/50/000000/drum-set.png" alt="drum set"><span>Drums Company</span>
        </div>

        <div class="nav-container">
          <ul>
            <li><a href="#home" class="nav-link">Home</a></li>
            <li><a href="#about" class="nav-link">About</a></li>
            <li><a href="#products" class="nav-link">Products</a></li>
            <li><a href="#contact" class="nav-link">Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>


  </div>
</body>

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

Using Twitter Bootstrap classes and spans within a control-group element

I'm working on creating a user-friendly interface that includes a group of checkboxes displayed as buttons. My goal is to organize these buttons into groups with a maximum of 3 buttons per row. <div class="container"> <div class="control-g ...

htmlcssformstwitter-bootstrap

Using C++ with the Win32 API, is it possible to design a feature-rich and interactive HTML rendering window that will allow your application to receive callbacks from

What my team needs is straightforward: we are working on a console app project and we require a function that opens a basic window displaying only HTML (default system-based) with JavaScript rendering. This window should read a default HTML+JS string (ei ...

javascriptc++windowswinapihtml-rendering

Comparing dynamic and static strings within objects using regex in JavaScript

Suppose there is an object with keys as strings containing dynamic values- let obj = { "/prodp/v1/engagemnt/{engID}/doc/{docID}": "roles_1", "/prodp/v1/engagemnt/{engID}/review/{reviewID}": "roles_2" } How can I find the value in the above object for the ...

javascriptregexstringsearch

What are some solutions for addressing the viewport width problem that comes up when incorporating Google+ comments on a responsive website

My website looks great on both desktop and mobile devices without any viewport issues, until I added Google+ comments. These comments will automatically set the width of the page to a specified amount: <!-- Google comments --> <script src="https: ...

javascripthtmlcssgoogle-plus

JavaScript is reporting that the length of the array is not defined, rather than the array itself

My goal is to utilize data from the Politifact API by saving it in an array named "superArray." I achieve this by making three API calls and adding 10 values from each response to superArray, as shown below: const URL1 = "https://www.politifa ...

javascriptarraysreactjsapireact-native

Different ways to display a PHP value that has been passed to an Ajax call within a radio button

I am facing an issue with my PHP code and Ajax script. I have a list of values being passed from the PHP code to the Ajax script, but the gender value is not being checked in the radio button. Here is an example of the passed values: {"name":"Okay","age": ...

javascriptjqueryajaxhtml

What is the process of video buffering in HTML5?

Is automatic buffering handled by HTML5? I'm planning to use video tags to display user-uploaded videos in my application. From what I've gathered, HTML5 buffers videos differently depending on the client's browser, with buffering varying ba ...

htmlhtml5-video

Adding a space after a comma automatically upon saving changes in VSCode

Whenever I input code (t,s) into the system and make changes to it, it automatically transforms into (t, s) with an added space after the comma. Is there a way to avoid VScode from adding this extra space on its own? ...

javascripthtmlvisual-studio-code

Plugin for turning text into "leet speak" using jQuery and Javascript

Recently, I've been on the hunt for a 1337 translator that I can seamlessly integrate into a jQuery plugin. While I believe I'm making progress, I can't shake off the feeling that something's amiss. My gut tells me that what I currently ...

javascriptjqueryhtmljquery-plugins

Tips for resolving the error message 'Object(...) is not a function' when using ref().set() with Firebase

While attempting to include custom information for a newly registered user in Firebase, I encountered an issue where the ref().set() function is being identified as not a valid function. What could be causing this problem? I have verified that the syntax ...

javascriptreactjsfirebasefirebase-realtime-database

Pressing the button in the navigation bar results in an expansion of the navbar

Can someone help me figure out why my navbar's height is different from the example on this Bootstrap navigation bar snippet? Here's the code I used: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h I copi ...

htmlcssbootstrap-4

The CSS animation spills out of the div container

I am encountering an issue with my code where the borders are not displaying as expected. The screen is divided into 8 equal parts, each of which should have a ripple effect. While everything works well in Chrome, Mozilla, Opera, and Safari, the ripple eff ...

javascriptjqueryhtmlcss

Exploring the versatility of orderBy and filter in handling cross-referenced content across multiple JSON objects

Is there a way to filter and search for the item name when the item details are sourced from another JSON object? Demo: http://codepen.io/anon/pen/GjAxKX While the rest of the filtering and ordering functionalities are functioning correctly, I am struggl ...

javascriptangularjsjsonangularjs-filterangularjs-orderby

Django is experiencing difficulties loading CSS on certain template files

Working on my page design using twitter-bootstrap, I've created a base.html file that serves as the global base for all templates to extend. However, I'm facing an issue where upon extending the base.html in all templates, the CSS doesn't d ...

cssdjangotwitter-bootstrapdjango-formsdjango-views

A guide to converting variables into a JSON Object in Javascript

I am looking for a way to insert external variables into a JSON object. An example of what I want: var username = "zvincze"; And then, using that variable to inject it into a JSON object: var json = '{"username":"VARIABLE_GOES_HERE"}' var obj ...

javascriptjsonvariables

Modifying the content inside a div element and inserting an image into it

I am facing a problem where I am unable to display the image when trying to change the inner HTML of a div by inserting an img source into it. Below is my JavaScript code snippet: var sliderimg = document.getElementById('abc_'+obj).src; $("#eve ...

javascriptjquery

What causes the contents of a container div to be shifted below the div itself?

I am attempting to create a circular border around an emoji, contained within a span inside a div. The 50% radius border should appear on hover, which it does, but the content in the span gets pushed below the div. Refer to the screenshot provided. <di ...

css

What is the best way to display multiple templates using a single route controller in iron-router?

Check out the current version of my project here Access the code for my project here Background: In my latest project, I am developing a blog using meteor and iron-router. The goal is to utilize a single controller for multiple "category pages" that fil ...

javascriptmongodbmeteoriron-router

What is the best way to change an existing boolean value in Prisma using MongoDB?

Exploring prisma with mongoDb for the first time and faced a challenge. I need to update a boolean value in a collection but struggling to find the right query to switch it between true and false... :( const updateUser = await prisma.user.update({ where: ...

javascriptnode.jstypescriptmongodbprisma

Modify the background color of an R chunk in a bookdown gitbook

Is there a method to eliminate the grey background color in order to display the colorful class? https://i.sstatic.net/l1Hhi.png https://i.sstatic.net/4aHMF.png ...

cssrbookdowngitbook