What is the best way to align an image to flex-end?

I recently started using React and ran into issues trying to align my image using CSS. Despite trying various methods like justifyContent, justifySelf, and floating right, I couldn't get the image to align on the right side of the screen without resorting to positioning. Any suggestions for an alternative approach?

Here is the image of my app

Here's the code snippet I'm working with:


import React from "react";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  main: {
    display: "flex",
    justifyContent: "flex-end"
  },
  header: {
    color: "white"
  },
  img: {
    justifySelf: "flex-end"
  }
});

export default function Header() {
  const classes = useStyles();
  return (
    <div className={classes.main}>
      <span className={classes.header}>Header</span>
    
      <img
        className={classes.img}
        src="https://facebook.github.io/react-native/img/header_logo.png"
      />
    </div>
  );
}

Answer №1

To achieve the desired layout, apply the CSS property justify-content: space-between

Your styling code should look like this:

const customStyles = makeStyles({
  container: {
   display: "flex",
   justifyContent: "space-between"
  },
  headerText: {
   color: "white"
  }
});

Answer №2

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

.grid-container {
  display: flex;
}
<section>
  <div class="grid-container">
    <div style="width: 50%;">
      <img width="20%" src="https://example.com/image1" alt="">
    </div>
    <div style="width: 50%;">
      <img width="20%" style="float: right;" src="https://example.com/image2" alt="">
    </div>
  </div>
</section>

Give this a try and see if it does the trick for you!

Answer №3

To center the image, simply add `margin-left:auto;` as shown in the example below.

.main{
  background: black;
  display: flex;
  align-items: center;
}
span{
  color: #fff;
}
img{
  margin-left: auto;
}
<div class="main">
  <span class="header">Header</span>

  <img
    class="main-image"
    src="https://facebook.github.io/react-native/img/header_logo.png"
  />
</div>

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

Implementing form validation for dropdown lists with Material-UI React: A comprehensive guide

I'm still learning React and I've been using material-ui for form validation. Everything was going smoothly until I encountered an issue with validating a dropdown list. Whenever I try to validate it, an error occurs: "Cannot read property ' ...

What is the proper way to utilize useRef with HTMLInputElements?

Dealing with React and hooks: In my code, there is a MainComponent that has its own operations and content which refreshes whenever the value of props.someData changes. Additionally, I have designed a customized InputFieldComponent. This component generat ...

Transferring information in React from a child component to its parent and then to another child

I'm currently developing my app using react.js and facing an issue with passing data between components. I have a Parent component (P) that needs to receive an array of objects from its child component (C1), then pass this data on to another child com ...

Is the CSS selector '.my-class *:not(input[type="text"])' accurate?

Is there a way to target all elements inside the DOM element with class "my-class" except for input elements of type text? I tried using the following CSS selector: .my-class *:not(input[type="text"]) { // Some CSS properties here } However, this do ...

Default values for CSS variables: only apply if the variable has not been previously defined

My Web Component relies on the power of CSS variables. To set default values for these variables is crucial. With their wide usage across multiple files, it's essential to define them once and for all. The initial approach turns the text color to b ...

Retrieving properties from a selector's output function

My situation is similar to the scenario described in the accessing react props in selectors documentation. However, in my case, let's assume that the visibilityFilter is coming from the props. Is there a way to achieve something like the following? e ...

Creating a React Material-UI dropdown with a customizable display value that differs from the selected option

I am working on creating a dropdown that shows multiple buttons for selection and a display value that is independent of the items in the dropdown, like this: https://i.stack.imgur.com/zgfu4.png For example, the user can choose different scales for a cha ...

Step-by-step guide to implementing onClick functionality within a component

Currently, I am utilizing https://github.com/winhtaikaung/react-tiny-link to showcase posts from various blogs. While I am able to successfully retrieve the previews, I am facing an issue with capturing views count using onClick(). Unfortunately, it appear ...

Verifying that the class name prefix aligns with the folder name using Stylelint

Currently, I am utilizing the "selector-class-pattern" rule from stylelint. My chosen pattern enforces the ECSS naming convention. The specific rule configuration is outlined below: "selector-class-pattern": ["^[a-z]([a-z0-9]){1,3}-[A-Z][a-zA-Z0-9]+(_[A-Z ...

Tips for recalling the display and concealment of a div element using cookies

My HTML code looks like this: <div id='mainleft-content'>content is visible</div> <div id="expand-hidden">Button Expand +</div> To show/hide the divs, I am using JQuery as shown below: $(document).ready(function () { ...

Jest is throwing a TypeError, indicating that the provided function in the ClassName is not recognized as a valid function

I've encountered an issue with my JavaScript files. Here's a snippet of the code: import axios from "axios"; export default class SomeService { static getSomething(id) { return axios .get(API_BASE_URL + API_URL_Something ...

Executing a function within JSX to dismiss a modal in NextJS

I am currently utilizing the Tanstack React Query library to perform a POST request from a Modal that includes a form: const addDay = (day: TDay) => { const apiURL = process.env.NEXT_PUBLIC_SERVER_URL const queryURL = apiURL + router ...

Eliminate the grey border located above the arrow in the Bootstrap tooltip

Is there a reason why a thin border is showing up on all of my Bootstrap tooltips? I have looked extensively for answers but have not been able to find anyone else having the same issue. This border appears consistently in all of our MVC projects, and we h ...

Having problems with loading @font-face in Ionic Framework Android app build?

While working on an app in Ionic Framework, I encountered a peculiar issue. https://i.stack.imgur.com/xk8uD.png In my Ionic Framework application, I am importing @font-face and running the app on an Android device (Galaxy SIII). Strangely, the font (Mont ...

Modify the color of the header on Material-UI Date Picker

I recently integrated a Material-UI Date Picker into my React Single Page Application and now I'm facing an issue with changing the header color. I attempted to modify it using the muiTheme palette property, but unfortunately, the header color remains ...

What is the best way to refine an array by comparing values in both the header and content?

List of items for filtering: [ { itemName: "Apples", category: [ { type: "Red Delicious", description: "Sweet and crunchy red apples" ...

Enhancing the appearance of text by applying a background color solely to its length

After conducting thorough research on the issue, I have come across various solutions that could potentially address it. However, despite my best efforts, I am unable to implement these solutions successfully. The problem at hand involves providing a colo ...

Should the null-forgiving operator be avoided when using `useRef`?

Is the following code snippet considered poor practice? const Component: React.FC<{}> = () => { const ref = React.useRef<HTMLDivElement>(null!); return <div ref={ref} />; } I'm specifically questioning the utilization of ...

"Encountering a 'react-scripts start' error while setting up on a different device

After creating a project on MacOS using "create react app" and committing it to Git, I am now facing an issue when cloning the folder on Windows. I have followed the usual steps: node npm npm install However, I encountered the following error: $ npm ...

Columns that adapt to different screen sizes while maintaining a fixed aspect ratio, limited to a maximum of two columns

I'm facing a challenge trying to blend a few elements together: My goal is to have two columns take up 100% of the browser width with a height that adjusts relative to this width. I want these columns to switch to one column when the viewport is sma ...