How can you center an image horizontally within a flex display?

I'm having trouble centering an image in my flex navbar. I've already attempted the solution provided here, but it didn't work.

nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-radius: 1.5em;
}

nav #this img {
  height: 5em;
  width: 5em;
}

.item {
  width: 45%;
  display: flex;
  justify-content: space-around;
  line-height: 3.2em;
  font-size: 1.75em;
}

.login {
  width: 20%;
  display: flex;
  justify-content: space-around;
  align-self: center;
}
<nav>
  <div class="item">
    <div> Content </div>
    <div> Content </div>
  </div>
  <div id="myimage">
    <img src="https://via.placeholder.com/150x50">
  </div>
  <div class="login">
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
  </div>
</nav>

cssflexboxcentering

Answer №1

I have made some updates to your CSS code. Give this a try and hopefully it resolves your issue. Thank you.

nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-radius: 1.5em;
}

nav #this img {
  height: 5em;
  width: 5em;
}

.item {
  width: 45%;
  display: flex;
  justify-content: space-around;
  font-size: 1.75em;
}

.login {
  width: 20%;
  display: flex;
  justify-content: space-around;
  align-self: center;
}

.flexItem {
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
}
<nav>
  <div class="item flexItem">
    <div> Content </div>
    <div> Content </div>
  </div>
  <div id="myimage">
    <img src="https://via.placeholder.com/150x50">
  </div>
  <div class="login flexItem">
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
  </div>
</nav>

Answer №2

I am not entirely sure what you are trying to achieve with this:

nav #this img {
 height: 5em;
 width: 5em;
}

It seems like you might be looking for something like this instead:

nav #myimage img {
 height: 5em;
 width: 5em;
}

To center using flexbox, use justify-content for the primary axis and align-items for the secondary axis in the parent flexbox element. You can apply this to the nav element to align its three direct child divs at the center.

nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-radius: 1.5em;
  align-items: center;
}

If you want to position the image within its parent div, you can achieve the same result by setting display: flex and align-items on the parent element (#myimage):

#myimage{
 display:flex;
 align-items:center;
}

Answer №3

nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-radius: 1.5em;
}

nav #this img {
  height: 5em;
  width: 5em;
}

.item {
  width: 45%;
  display: flex;
  justify-content: space-around;
  line-height: 3.2em;
  font-size: 1.75em;
}

.login {
  width: 20%;
  display: flex;
  justify-content: space-around;
  align-self: center;
}
#myimage {
    display: flex;
    justify-content: center;
    align-items: center;
}
<nav>
  <div class="item">
    <div> Content </div>
    <div> Content </div>
  </div>
  <div id="myimage">
    <img src="https://via.placeholder.com/150x50">
  </div>
  <div class="login">
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
  </div>
</nav>

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

Tutorial on achieving full screen height for Bootstrap card within a column

I am working on a React grid layout with two cards, each in one column. My goal is to make the card on the left fill the entire column height (screen height), and if its content expands, have a scrollbar while keeping the second card intact and aligned to ...

htmlcssbootstrap-4react-bootstrap

Instructions for correctly integrating the ng2-datepicker module into an Angular 2 application

Ng2-datepicker (1.0.6) Angular2 (2.0.0-rc.5) As I attempted to implement it in my HTML following the documentation, I encountered the following error: zone.js:484 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngMode ...

javascripthtmlcssangularng2-datepicker

I am interested in creating an image that fills the entire screen and remains that way until

I am currently working on incorporating a full screen image to my page, which can be found at My goal is to have the image fill 100% of the width and height of the screen until the user scrolls down to reveal the content below. To give you an idea of wha ...

htmlcssimagefullscreenmuse

The Material UI month picker interface is not displaying correctly

When trying to implement the code snippet below, <MonthPicker/> I am encountering issues with the UI of the month picker both on the website and at times. https://i.stack.imgur.com/EKsYA.png It seems like the month picker is being utilized in a di ...

cssdatepickermaterial-ui

Switch up your text display using JQuery and toggle between different texts

I have implemented a jQuery script to toggle the display of certain paragraphs when the "More" link is clicked. However, I am facing an issue where the link always displays "More" even after the content has been expanded. I want it to change to "Less" once ...

javascriptjqueryhtmlcsstoggle

CSS Animations as an Alternative to jQuery's fadeIn(), fadeOut(), and fadeTo() Functions

I currently have the following code snippet: $('#button1').click(function(){ $('#header_bg').fadeTo(15, 0, function() { document.getElementById('header_bg').style.fill = '#FF0000'; }).fadeTo(&ap ...

jquerycssiosmobiletransition

Is it possible to customize the deep elements of ExpansionPanelSummary using styled-components in React?

After digging into the documentation and examples on how to customize Material UI styling with styled-components, I successfully applied styling to the root and "deeper elements" within an ExpansionPanel and ExpansionPanelDetails. However, when attempting ...

javascriptcssreactjsmaterial-uistyled-components

What could be causing the extra space around my body on mobile devices?

I am currently delving into the world of responsive design, starting from square one. My aim is to create a minimalist webpage with no side margins. However, when viewing it on an iPhone, there still seems to be a significant white margin on either side. T ...

cssresponsive-design

Creating text that adapts to various screen sizes when displayed over a video background

I am experimenting with having text displayed over a video background that adjusts to different screen sizes. I want the text to fill up the entire screen regardless of the browser size. What would be the most effective way to achieve this? Currently, I h ...

cssreactjstextbootstrap-4responsive

Is CSS3 Background Specification Still Incomplete?

Currently in Chrome, the background style specification is: background: color position/size repeat origin clip attachment image|initial|inherit; However, I am having trouble making the position/size fragment work; I should be able to use red top left 10 ...

css

Using ReactJS to toggle a div upon clicking

I am facing an issue with toggling a div by clicking on text within a toggle bar. I am in the process of recreating a WordPress website template in React JS that was originally built using bootstrap. You can view the original template here. So far, I have ...

htmlcssreactjs

Images mysteriously vanishing after importing the Bootstrap stylesheet

One of the features on my website is a page where, upon hovering over an image, an overlay appears with a caption. Below is the code for one such image: <div id="content"> <div class="mosaic-block fade"> <a targe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Video background in JavaScript

Can anyone help me with using the jQuery plug in videoBG to fill a top div with a video that has 100% width and height? I want the #top-video to fill the #top-content but nothing is showing up. Any suggestions would be appreciated. Thanks! <!DOCTYPE ...

javascripthtmlcssvideojquery-plugins

Browsing through a collection of images Tinder-style, compatible across multiple platforms (Hybrid / HTML5 compatibility accepted)

I have a vision to develop an app similar to Tinder, where users can swipe through a stack of photos. I am wondering if anyone has knowledge of how to achieve this effect on multiple platforms. My current plan involves creating a web app using jQuery Mobil ...

htmlcssjquery-mobileweb-applicationscross-platform

Ensure uniform height for images in the absence of specific dimensions

Is there a solution to ensure that images of different sizes have the same height on a card? The issue is that the content is dynamic and coming from a CMS, so I don't know in advance what the image size will be or how much text will be in the card. & ...

cssimagebootstrap-5image-size

Ways to incorporate radio buttons, checkboxes, and select fields into a multi-step form using JavaScript

In the snippet below, I have created a multi-step form where users can provide details. The issue is that currently only text input fields are being accepted. The array of questions specifies the type of input required for each question: Question no.1 req ...

javascripthtmljquerycss

Using the HTML video tag to apply different background colors based on the individual machines being

My web application includes a video that is set to play against the same background color as the webpage. However, I am experiencing an issue where the video background appears differently on various machines using the same browser. What I would like to ac ...

htmlcssvue.jsbrowserbackground-color

Exploring optimal practices for CSS components and responsive design integration

If I were to develop a reusable component like a table that will be used across various pages, the content and number of columns may differ from one page to another, but the overall design should remain consistent. .my-table { background-color: ... et ...

csssassresponsive

Utilizing jQuery for dynamic horizontal positioning of background images in CSS

Is there a way to set only the horizontal background property? I've tried using background-position-x and it works in Chrome, Safari, and IE, but not in Firefox or Opera. Additionally, I would like to dynamically set the left value of the position. ...

javascriptjqueryhtmlcss

The color of my Navbar remains stationary despite implementing Javascript for scroll effects

I am having trouble with the Javascript portion of my code, which I copied from a tutorial. The Navbar is not changing color when scrolled, and I'm not sure if the issue lies with the Javascript, the CSS, or if I need to add 'scrolled' to th ...

javascripthtmlcssbootstrap-4navbar