Arrange a line of images in the center

I've been working on aligning images in a row and centering them using flex, but I'm having trouble figuring it out. I managed to center all the images with flex and justify-content center, but setting flex-direction: row on the container doesn't seem to have any effect; the images still stack vertically.

I'm also using Material UI, so if there's a more efficient way to achieve this with it, please share your insights.

Full code - https://pastebin.com/t4wiCexe [Cannot provide CodeSandbox link as the images are fetched from Firebase database, my apologies]

Thanks!

Home.js

<div className="post">
        <img className="postimage" src={post.link} />
  </div>

App.css

.postimage{
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.post{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}

https://i.sstatic.net/XQLEa.png

Answer №1

To achieve the desired outcome, you can enclose all your images within a Stack component and make use of its properties.

    <Stack
      direction="row"
      justifyContent="center"
      alignItems="center"
      spacing={1}
    >
// Begin your iteration here
   <img className="postimage" src={post.link} />
// End of iteration
    </Stack>

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

Issue with Bootstrap dropdown-menu alignment when image_tag contains the "center-block" class

<ul class="logo"> <li class="navtabs dropdown"> <a class="dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <%= image_tag('Thumbnailimagestufffurr ...

I'm having trouble getting Jquery's insertAfter() function to function properly

After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...

Guide to changing the class of a particular child element when the parent element is clicked with vanilla JavaScript

Upon clicking the parent button, a class within its child element will toggle to show or hide. If the child element is selected, a loading animation will appear for a brief moment before reverting back to its original hidden state. I attempted to achieve ...

Excessive image display | HTML and CSS synergize

I am having some trouble with my image gallery. Each image is displayed as a vertical column and has zooming effects when hovered over. Clicking on an image should show it in full screen with a caption. The problem arises when dealing with images that are ...

Are there any similar functions in ReactJS to FindOrCreate?

I'm currently working with the following code snippet: async _addStructure() { const {pmo} = this.state; let struct = null; try { struct = await structureService.getWhere({ name: pmo }) ...

Using the className prop in React with TypeScript

How can the className prop be properly typed and utilized in a custom component? In the past, it was possible to do the following: class MyComponent extends React.Component<MyProps, {}> { ... } and then include the component using: <MyCompone ...

"Enhance Your Dining Experience with a Menu that Captiv

My goal is to create a small menu with only the initial letter of each name visible, but when focused, I want the full word to appear. Here's an example: css: .menu:focus { } php: <nav> <li class="menu"><a ...

Implementing image rendering functionality in Vue.js

So here's what's going on: I developed a horror movie bucket list app for my bootcamp final project. The minimum viable product received positive feedback, and I obtained my certification. However, now that I've graduated, I want to enhance ...

Reposition the navbar-brand

I need to adjust the position of my navbar-brand slightly to the right as it is currently overlapping with another button. How can I achieve this in my HTML code? Here's a snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> ...

Progress Bar Modules

I am currently working on creating a customizable animated progress bar that can be utilized as follows: <bar [type]="'health'" [percentage]="'80'"></bar> It is functional up to the point where I need to adjust different p ...

What is the best method for accessing the HTML element specified in React JSX?

Consider this custom component example: import React, { Component } from 'react'; class Canvas extends Component { componentDidMount() { let canvas = this.refs.canvas; const ctx = canvas.getContext('2d'); ctx.fillRect(0, ...

Issue with ng-pattern validation not functioning correctly on textarea in AngularJS

Attempting to validate a textarea that, if valid, will enable a specific button. Utilizing ngPattern for validation but encountering issues with implementation. Referencing the example code below: <div ng-app="test"> <form name="theForm" ng-contr ...

Tips for incorporating a PDF file into a website when the Adobe Reader add-on is disabled in Internet Explorer

I attempted to insert a PDF into my website using the <embed> tag. Unfortunately, it doesn't seem to be functioning properly in Internet Explorer when the Adobe Reader add-on is disabled. Is there a solution that will allow it to work even if th ...

What methods can be used to control access to document.styleSheets data, and what is the purpose behind doing so?

Recently, I came across the document.styleSheets API, which allows you to access stylesheets used by a website. Using this API is simple, for example, document.styleSheets[0].cssRules will provide all CSS rules for the first stylesheet on a page. When I t ...

Is there a way to modify the antd TimePicker to display hours from 00 to 99 instead of the usual 00 to 23 range?

import React, { useState } from "react"; import "./index.css"; import { TimePicker } from "antd"; import type { Dayjs } from "dayjs"; const format = "HH:mm"; const Clock: React.FC = () =& ...

How can the background color of a DIV be altered based on the values of an array's minimum

Basically, I am fetching values from an array using AJAX. The background color will change from green to red based on the "aht_value". Currently, the colors are displaying correctly because I hardcoded the values in the calculation below. However, I want t ...

Close the Material UI ClickAwayListener when clicking on the component itself

I encountered an issue with a display sidebar Switch that appears within a Popper element. The desired behavior is for the Popper to disappear when clicked outside of its boundaries, but remain visible if clicked inside. However, clicking on the Switch or ...

Showing information in a tree structure using HTML, CSS, and JQuery

Trying to figure out how to present a large amount of data in a tree structure. Each node could have multiple children and parents, requiring a dynamic representation. I've explored various JavaScript libraries like D3 and Raphael, but unfortunately, ...

jquery allows you to toggle the visibility of content

There are two divs with a button positioned above them. Initially, only one div, the catalogusOrderBox, is visible. When the button named manualButton is clicked, it should display the manualOrderBox div while hiding the catalogusOrderBox div. The text on ...

Creating a loading button using Material UI

Currently, I am incorporating react in conjunction with the Material UI framework. My inquiry revolves around how to construct a loading button within this particular framework. I desire something akin to what can be observed on this example. ...