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

The functionality of Ajax loading content will fail when the link is already loaded

I am currently using an ajax script that dynamically replaces the content of #main with the contents of a loaded page based on the clicked link. For example, clicking on rddd would replace #main with the content of about.php. However, I encountered an is ...

javascriptjqueryhtmlajax

"Discover the Step-by-Step Guide to Launching Fresh Content or Code in the Current Tab and

I have a webpage with multiple tabs, each representing different content. Now, I want to create a functionality where if a user clicks on the "Home" tab, they are prompted to enter a password (e.g., 1234). Upon entering the correct password, the user shoul ...

javascripthtml

Utilizing Bootstrap's column grid system (col-sm) to set the width of form controls

Is it possible to utilize col-sm or col-xs within the input tag to specify its width? <div> <input type="button" class="col-sm-2" value="Clear"> <input type="button" class="col-sm-2" value="Confirm"> </div> ...

htmltwitter-bootstrapcsscoding-style

Table with a set height containing four cells (without scroll bars) and text allocated to each cell

I am looking to create a table in HTML/CSS with 4 cells stacked on top of each other. I have a couple of questions: How can I set the width and height for each cell individually (with varying heights), while ensuring that there are no scroll bars if th ...

phphtmlmysqlcss

How can I redirect after the back button is pressed?

I am currently working with a trio of apps and scripts. The first app allows the user to choose a value, which is then passed on to the second script. This script fetches data from a database and generates XML, which is subsequently posted to an Eclipse/J ...

javascripthtmlback-button

The hover effects cease before the cursor is even shifted

Can someone explain why the hover effect stops before the mouse is moved off the element? I implemented the hover effect on a before pseudo element. ...

htmlcsshover

Personalized Django Sign-in

I am having difficulty accessing the password that needs to be transferred from my form. I need help figuring out where I might be making a mistake. I am looking to create a custom login page because I want to change how usernames are input. For now, I hav ...

pythonhtmldjango

Clicking on a specific month results in displaying only one row from the database rather than showing all rows associated with that particular month

I am facing an issue with my calendar feature on the website. The problem is that when I click on a specific month, it should display all the data associated with that particular month. However, the current code does not seem to work as expected. For insta ...

javascriptphphtml

Tips for extracting tables from a document using Node.js

When converting an XML document to JSON using the xml-js library, one of the attributes includes HTML markup. After parsing, I end up with JSON that contains HTML within the "description":"_text": field. { "name": { ...

javascripthtmlnode.jsjsonparsing

Having trouble with a JavaScript function as a novice coder

Hello, I'm still getting the hang of JavaScript - just a few days into learning it. I can't figure out why this function I'm calling isn't functioning as expected. Here's the content of my HTML page: <!doctype html> <htm ...

javascripthtml

Is there a method, like using jQuery, to insert `<br>` tags into each line of a dropdown select list?

I need help with implementing a select tool in a limited horizontal space with each line containing a lot of information. I attempted to embed a tag into the line but it didn't work. Are there any solutions available that could provide a simple fix ...

jqueryhtmlcssajax

The system encountered an error stating that the class 'Database' could not be found

Whenever I try to establish a connection to my SQL database using my pdo_object.php file, I encounter the following error in my model.php: Fatal error: Class 'Db' not found in /path/model.php on line 8 I have double-checked that all permissions ...

phphtmlmysqlsqldatabase

Unable to present the information due to a codeigniter error in retrieving the data

Encountering an issue where the data cannot be displayed and it's showing an error message of undefined variable: avg. Below is the script being used: The controller function: public function rate_config() { $rt = $_POST['hasil_rating&a ...

phphtmlmysqlcodeignitercodeigniter-3

The state of XMLHttpRequest always remains in a perpetual state of progress, never

I have come across an MVC Core application. One of the methods in this application currently has the following structure: public IActionResult Call(string call) { Response.ContentType = "text/plain"; return Ok(call); } In addi ...

javascripthtmlajaxmodel-view-controller

Utilizing Angular to Handle Undefined Variables in String Interpolation

Seeking a way to showcase data obtained from an external API on a webpage using Angular's string interpolation. If no data is retrieved or is still pending, the aim is to display 'N/A'. An attempt was made following this method, but encoun ...

htmlangulartypescript

Unusual Happenings with jQuery Draggable

Currently, I am experimenting with jQuery draggable to move individual letters of the word "Hello" around on the page. However, I have come across a frustrating issue. When I drag the letter H towards the right and it gets near the letters E, L, L, or O, ...

jqueryhtmlcssdraggable

Is there a way to rearrange my divs in the mobile display?

Is there a way to make the image column stack below the text info column in mobile view? I've tried using flexbox without success, so any help would be greatly appreciated. Thank you! <div class="container"> <div class="row"> ...

htmlcsstwitter-bootstrapflexbox

Assistance is required to navigate my character within the canvas

Having trouble getting the image to move in the canvas. Have tried multiple methods with no success. Please assist! var canvas = document.getElementById("mainCanvas"); canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; ...

javascripthtml

JQuery - Triggering mouseenter/hover event only on top-level menu items, excluding the nested submenu items (list items that are not within nested lists)

I have a complex navigation menu structure with nested lists, and I'm struggling to trigger an event only on the top-level items when hovered. Despite trying different jQuery selectors and methods, such as using the NOT selector or targeting direct ch ...

javascripthtmljquerycss

Struggling to get the nth-child selector to function properly in IE8

Looking for a solution to alternate colors in a table? Here's what I tried: #grid tr:nth-child(odd) { background-color:#eee; } #grid tr:nth-child(even) { background-color:#fff; } Unfortunately, this works in Firefox but not in IE8. After some i ...

cssinternet-explorer-8css-selectors