Align the content of the list items to the center and position the list in the center of

I am struggling to get the List centered beneath "Contact Me" and the hr tag. Both of those elements are perfectly centered in the column, but the list and icons are aligned to the left. Ideally, I would like them to be in the center like everything else. I've experimented with justify-content and text-align, but I might not be applying them correctly.

Imagine I have no CSS knowledge and guide me through this process haha.

Thank you in advance!

<Cell col={6}>
    <h2>Contact Me</h2>
    <hr/>
    <div className="contact-list-con">
       <List>
         <ListItem>
           <ListItemContent style={{fontSize:'2.13vmax', fontFamily: 'Julius Sans One'}}>
             <Icon style={{fontSize:'2.13vmax'}}>perm_phone_msg</Icon>
             <a href="tel:">888-888-8888</a>
           </ListItemContent>
         </ListItem>

         <ListItem>
           <ListItemContent style={{fontSize:'2.13vmax', fontFamily: 'Julius Sans One'}}>
             <Icon style={{fontSize:'2.13vmax'}}>email</Icon>
             <a href="mailto:"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="422a272e2e2d022a272e2e2d352d302e266c212d2f">[email protected]</a></a>
           </ListItemContent>
         </ListItem>
       </List>
     </div>
 </Cell>
cssreactjslistmaterial-uilistitem

Answer №1

<div class="centered">
<Cell col={6}>
    <h2>Get in Touch</h2>
    <hr/>
    <div class="contact-list-con">
       <List>
         <ListItem>
           <ListItemContent style={{fontSize:'2.13vmax', fontFamily: 'Julius Sans One'}}>
             <Icon style={{fontSize:'2.13vmax'}}>perm_phone_msg</Icon>
             <a href="tel:">888-888-8888</a>
           </ListItemContent>
         </ListItem>

         <ListItem>
           <ListItemContent style={{fontSize:'2.13vmax', fontFamily: 'Julius Sans One'}}>
             <Icon style={{fontSize:'2.13vmax'}}>email</Icon>
             <a href="mailto:"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ce4e9e0e0e3cce4e9e0e0e3fbe3fee0e8a2efe3e1">[email protected]</a></a>
           </ListItemContent>
         </ListItem>
       </List>
     </div>
 </Cell>
</div>

.centered{
display:flex;
flex-direction:row;
justify-content:center;
width:100%;
}
.contact-list-con{
width:auto;
}

By placing it in a flex container, you can easily center the content without dealing with positioning properties.

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

"Users are experiencing issues with Mui Datepicker due to its acceptance of an incorrect date

When using Mui datepicker with the format yyyy-MM-dd, if a user enters a value with only one day (yyyy-MM-d), like 2020-12-1, it automatically gets converted to 2020-12-01. Is there a way to enforce that the user must enter two digits for the day? Here i ...

reactjsmaterial-ui

What steps should I take to address the deprecated class warnings appearing for MDCTextField in my code

Currently tackling a challenge with textfields and floating labels using the MaterialComponent pod. The Textfield class is issuing a warning stating that 'MDCTextField' is deprecated along with its associated classes. Any suggestions on how to ad ...

iosswiftmaterial-ui

React Native Debugger Issue - Unable to Access /debugger-ui/

Every time I try to load React Native Debugger, it automatically directs me to http://localhost:8081/debugger-ui/. Unfortunately, I am encountering the following error message - Cannot GET /debugger-ui/ ...

reactjsreact-native

Display the latest item using React

I've encountered a problem with displaying the last message in my pet chat application. Currently, I have to manually scroll to the bottom every time I open the chat in order to see the latest message. This scrolling behavior is not very user-friendly ...

cssreactjsnext.jsfrontend

The external typing file encounters an issue when trying to locate the relative path to its own index.d.ts file

While working on my project and using react-color as a dependency, I encountered an issue with the tsc import failing. The error message displayed: node_modules/@types/react-color/lib/components/sketch/Sketch.d.ts(2,41): error TS2307: Cannot find module & ...

reactjstypescripttypescript-typings

How can you style a two-item list in Material-UI React to display the items side by side?

I have a list that contains two items: 'label' and 'value'. This is the current layout: https://i.stack.imgur.com/HufX7.png How can I rearrange the items on the right to be positioned next to the label on the left? https://i.stack.im ...

javascriptcssreactjsmaterial-ui

What are some effective ways to test React Router using Jest?

Just starting out with Jest testing and looking to test the code below. import React from "react"; import "./ButtonLogin.css"; import { Link } from 'react-router-dom'; function ButtonLogin() { return ( <Link to ...

javascriptreactjsjestjsreact-router-domreact-testing-library

What is the reason for the React Slingshot repository utilizing both Npm and Yarn?

While exploring the react slingshot starter kit, I came across a quandary about why both npm and yarn are used in the project simultaneously. If you want to check out the repository, here is the URL: https://github.com/coryhouse/react-slingshot I would a ...

reactjsnpmreact-slingshot

Highlighting a Table Column with a Radio Button

I am struggling with controlling the highlight of a table using only radio buttons. When I try to change the selector to input:radio, it doesn't work as expected. It seems to only work with the selector provided in my code snippet. $("th").on("clic ...

javascripthtmlcss

React dynamic table

I've been experimenting with creating a dynamic table in React that allows users to add and delete rows. I need the data entered by the user to be saved, possibly using in-state management so that I can work with it later. Essentially, I'm looki ...

javascriptreactjstypescripttwitter-bootstrapmaterial-ui

Is it possible to adjust the width of the comment box on the Facebook "Like" button?

Is there a way to set the width of the comment box that appears after clicking the Facebook "Like" button? I know how to adjust the width of the button itself and related content, but can't find any options for the comment box: I've tried overri ...

javascripthtmlcssfacebookfacebook-like

jQuery - Modify Turn.js to exclusively implement the page Peel effect

I am attempting to implement the peel effect from turn.js into my code, where hovering over the bottom right corner of the page causes it to peel slightly and appear as if it is bending upwards. I specifically want only the peel effect and not the entire ...

jqueryhtmljquery-uicssjquery-plugins

Ways to increase the worth of a list

I'm struggling with a function to populate my menu list: buildListMenu = () => { {dashboardRoutes.map((prop, key) => { if(prop.subMenus != null){ const menu = { code: prop.code, openSubMenu: false ...

reactjslist

Remove the value from the Material UI text field in a React application

Looking to reset the value of a materialUI textfield in react? Take a look at the following code snippet - <TextField hintText="" ref={(node) => this._toField = node} onChange={this.changeToText} floatingLabelText="To*" floatingLabelFixe ...

reactjsmaterial-ui

Utilize the latest REDUX state within a React component's function

I'm currently facing an issue in my React application where I am struggling to access the updated state from within a function. Here is a simplified version of my problem: I have a custom React Component to which I pass a variable representing the st ...

javascriptreactjsreact-reduxstate

Implementing server-side API calls in REACT

Seeking to boost SEO and performance, I am working on rendering my React app server-side. However, as most of the content comes from an API that is currently being called client-side, the server is returning a mostly empty HTML template. Is there a way to ...

node.jsreactjsapiexpress

Surprising results when a class is applied using jQuery

Exploring the differences between two fiddles (make sure to run the code on the jsfiddle pages to see the differences clearly). First Fiddle Simple demonstration: $("body").addClass("noScroll"); alert($("body").hasClass("noScroll")); $("body").removeCla ...

javascriptjqueryhtmlcss

Error encountered with object.map() function - what fundamental concept am I missing?

Could someone lend me a fresh set of eyes on this... The React Component is fetching data from MariaDB using a useEffect() hook. The data is retrieved successfully without any errors, and the console.log shows the correct data (refer to the image below). ...

reactjstypescriptpreact

Tips for structuring your useState and useQuery hooks in Apollo/Graphql applications

I'm encountering an unusual issue while attempting to pass data from useState([]) to the variables used for filtering products. What I'm observing is that when I click on a category checkbox, it remains unchecked. However, the products are filte ...

reactjsreact-hooksgraphqlnext.jsapollo-client

Two sections that are supposed to have the same height, but one seems to be slightly taller than the other

Upon closer inspection: At first glance, they may appear identical at certain zoom levels. However, a more detailed examination through zooming in and out reveals a noticeable discrepancy. Firefox's default zoom may make them seem incorrect, while Chr ...

csshtmllayoutheight