As soon as I insert an image, the text on the right automatically moves to the bottom

I'm going crazy over this issue. My navigation bar has three div elements, each with text aligned both vertically and horizontally at the center.

However, when I insert an image (an SVG icon of a zoom lens) before the "search" text, it shifts the text to the bottom.

Here's the code snippet:

HTML

<nav>
        <div id="leftside">
            <img src="img/zoom-lens.png" alt="search">
            search
        </div>
        <div id="middle">
            Arkadomundo
        </div>
        <div id="rightside">
            Sign Up
        </div>
</nav>

CSS

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
    margin: 0;
    padding: 0;
}

nav {
    height: 70px;
    width: 100%;
    background-color: #241F1C;
    font-family: 'Press Start 2P', cursive;
    color: #FFFFFF;
    display: flex;
    align-items: center;
}

#leftside {
    flex-grow: 1;
    text-align: left;
    margin-left: 10px;
}

#leftside img {
    height: 50px;
}

#middle{
    flex-grow: 2;
    text-align: center;
}

#rightside {
    flex-grow: 1;
    text-align: right;
    margin-right: 10px;
}

It seems like a simple problem for you, but I'm struggling to figure out why this is happening.

htmlcssimageflexboxvertical-alignment

Answer №1

Your #leftside div needs additional styling to align its contents vertically. To achieve this, include the following CSS properties: 

display: flex; align-items: center;

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
  margin: 0;
  padding: 0;
}

nav {
  height: 70px;
  width: 100%;
  background-color: #241F1C;
  font-family: 'Press Start 2P', cursive;
  color: #FFFFFF;
  display: flex;
  align-items: center;
}

#leftside {
  flex-grow: 1;
  text-align: left;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

#leftside img {
  height: 50px;
}

#middle {
  flex-grow: 2;
  text-align: center;
}

#rightside {
  flex-grow: 1;
  text-align: right;
  margin-right: 10px;
}
<nav>
  <div id="leftside">
    <img src="https://picsum.photos/80/120" alt="image"> search
  </div>
  <div id="middle">
    Arkadomundo
  </div>
  <div id="rightside">
    Sign Up
  </div>
</nav>

Answer №2

To enhance the layout, consider incorporating display: inline-block; to the CSS rule for #leftside img

#leftside img {
    height: 50px;
    display: inline-block;
}

Answer №3

To resolve this issue, convert #left-side into a flex container and apply the align-items property with a value of center to ensure that the child elements of #left-side are centered. Alternatively, you can utilize the following CSS code snippet:

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
    margin: 0;
    padding: 0;
}

nav {
    height: 70px;
    width: 100%;
    background-color: #241F1C;
    font-family: 'Press Start 2P', cursive;
    color: #FFFFFF;
    display: flex;
    align-items: center;
}

#leftside {
    flex-grow: 1;
    text-align: left;
    margin-left: 10px;
    display: flex;
    align-items: center;
}

#leftside img {
    height: 50px;
}

#middle{
    flex-grow: 2;
    text-align: center;
}


#rightside {
    flex-grow: 1;
    text-align: right;
    margin-right: 10px;
}

Answer №4

By applying display flex and aligning items to the #leftside, it is now functioning as intended!

I appreciate your help!

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

Is there a way to effortlessly launch a new window with just a single click?

I'm encountering an issue with a function that is supposed to open a new window when a button is clicked. Strangely, on the first click, nothing happens, but on the second click, the window finally opens. Here's my code: Script <script src ...

javascriptjqueryhtmlhtml-tableclick

transfer a product attribute value to a different product attribute within the Magento platform

There is an attribute called Weight : Attribute Code: weight Scope: general Catalog Input Type for Store Owner: Text Field Values Required: yes Apply To: Simple Product, Bundle Product Allow HTML Tags on Frontend: yes Also, there is a General Weight attr ...

javascriptphphtmlxmlmagento

Incorporating tawk.to into a Nuxt/Vue application

Has anyone had success implementing tawk.to in a Nuxt application? I took the initiative to create a file called "tawk.js" in my plugin folder and added the following code: var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date() (function () { ...

javascripthtmlvue.jsnuxt.jstawk.to

Is using the <a> tag in HTML5 detrimental to SEO?

Recently, I've been experimenting with using the <a> tag as a container in HTML5. It's interesting to note that this tag can now have block elements as children. Take a look at this transformation: before (valid XHTML 1.1) <div> ...

htmlseo

Can you guide me on how to duplicate a file when a button is clicked?

I am working on creating a one-page utility/prototype that has an admin user interface. The goal is to have a drop-down box for the admin user to select an option and then copy a file from one directory to another upon clicking a submit button. Although I ...

phpjqueryhtml

What is the best way to adjust the width of a column to perfectly fit its contents when using IE9 compatibility mode?

Within my HTML code, I've included the table displayed below. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <style type="text/css"> table, td, tr, th{ border:1px; } .onepx{ ...

htmlcssie-compatibility-mode

Align text to the center within the dropdown menu for all web browsers

Is it possible to center align text in a select drop down for all browsers? It appears centered in Firefox, but shifts to the left in Chrome and Safari. CSS: .challenge{ max-width: 850px; width: 98%; height: 50px; background: #ffffff; margin: 3 ...

htmlcssdrop-down-menucross-browser

Testing with Selenium to confirm the presence of a specific CSS attribute within the style attribute

I am looking to create a Selenium IDE test that will confirm the value of the bottom attribute in the "style" section below. How can I go about writing a test for this considering: The Xpath to the element is: xpath=/html/body/div/div[3]/div[2]/div/div/di ...

htmlcssseleniumxpath

Text in SVG vanishes when label size increases

I've been exploring Morris.js for creating charts, which relies on SVG to generate graphs. I've shared a JSbin setup here: JSbin example One challenge with Morris.js is the X-Axis labels disappearing when they are too large. Adjusting the size o ...

cssgraphsvgchartsmorris.js

Navigating through directories in an HTML file

In my directory, the folders are named in uppercase letters and have the following structure: ONLINESHOP |-- index.html |-- COMPONENTS |-- CONFIG |-- TEMPLATES |-- CSS |-- main-style.css |-- CONTROLLERS |-- MODE ...

htmlcssrelative-path

What could be causing the span class data to not be retrieved by the getText method

Looking to retrieve the value of a span class called 'spacer-right big project-card-measure-secondary-info' <span class="spacer-right big project-card-measure-secondary-info">1</span> snippet of code: browser.waitForEl ...

javascripthtmlcssautomated-testsnightwatch.js

The alterations made to a single dropdown option are causing ripple effects across all other dropdowns

There is an add button that continuously adds a div container containing two dropdowns. The selection in one dropdown affects the data in the other dropdown. When the add button is clicked, a second div with both dropdowns is added. However, changing the ...

javascripthtmlcssangular

Having trouble with Vue.js implementation of Bootstrap tab navigation?

I am currently working on a vue.js application that consists of 2 routed components. I recently attempted to integrate a bootstrap tab navigation into the first component, but unfortunately, the tab contents are not being properly displayed. <templat ...

javascripthtmlcsstwitter-bootstrapvue.js

What could be preventing me from setting a boolean variable within an Observable?

After retrieving data from the Service, I am attempting to hide a specific div element. Below is the HTML code: <progressbar *ngIf="isLoadingBootStockData" [value]="100" type="default"> </progressba ...

angularhtmltypescriptobservableangular7

Is it possible to use styled-components to specifically style a child class within a component?

Hey there, I'm currently working with a mui Badge component and am trying to customize the appearance of the small circle. This is what I have so far: const BadgeStyled = styled(Badge)` & > .muibadge-badge: { background-color: #d3d4d7; ...

cssmaterial-uistyled-components

Streamlining form submission processes with VBA automation of check box selections

Currently, I am facing a challenge with automating the process of filling out a web form using VBA. Specifically, I have hit a roadblock when it comes to selecting a checkbox in the form before proceeding. Here is the HTML code pertaining to the checkbox: ...

htmlvbaautomation

Error with infiniteCarousel in Internet Explorer versions 7 and 8 when using jQuery

Hello everyone! I've run into a little issue with some jQuery code I'm using. It was working fine before, but after making several changes and improvements, I can't seem to figure out what the problem is. I keep getting JS errors in both IE7 ...

javascriptjqueryhtmlcssinternet-explorer

I am experiencing an issue where the custom form validation directive in AngularJS is not functioning properly within my modal

To enhance the validation of my input boxes, I created a custom directive called nx-validate. This directive is designed to be added to a bootstrap div.form-group, which will then check if the <input/> field is $dirty or $invalid, and apply the appro ...

javascriptangularjshtmltwitter-bootstrapangularjs-directive

Using jQuery to Extract HTML Content from a JSON Object

I'm completely lost on what I'm doing incorrectly, but the JSON string I have looks like this: jsonp443489({"content":"<!DOCTYPE html><html><head><title>Title</title></head><body><p>Hello World< ...

javascriptjqueryhtmlajaxjson

Utilizing JavaScript for manipulating arrays and displaying images

After asking this question previously without a satisfactory solution, I am hoping to provide better clarification. Imagine having an array with 3 items and it lands on 0 - a code is set up to display this in a div. Now, I want the image to be shown righ ...

javascripthtmlcss