React - Material UI Divider not centered

Is the title says - my divider is not centered in the middle of my text. The current result displays a misalignment:

https://i.sstatic.net/0FjKN.png

However, I am aiming for my divider to be placed in the center like this (refer to red line):

https://i.sstatic.net/1CL2N.png

It's quite strange because according to the material ui documentation, this should be the default behavior, but it doesn't seem to work for me.

Below is the code snippet that I am using:

<Divider textAlign="center" variant="inset"><Typography variant="h3">About</Typography></Divider>
htmlcssreactjsmaterial-ui

Answer №1

To achieve the desired outcome, simply encapsulate your Divider component with a div or Box element:

<Box>
     <Divider>Overview</Divider>
</Box>

Answer №2

To resolve the issue I was experiencing, I utilized a combination of CSS properties. By applying display: flex, align-items, and justify-content to center the typography, as well as setting the width and height to 100%, I was able to achieve the desired outcome.

  <Divider
        textAlign="center"
        sx={{
          border: "1px solid #E6E6E"
        }}
      >
        <Typography
          variant="h3"
          sx={{
            display: "flex",
            justifyContent: "center",
            width: "100%",
            height: "100%",
            alignItems: "center",
            
          }}
        >
          About
        </Typography>
      </Divider>

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

What impact does utilizing CSS 3D Transforms have on search engine optimization (SEO)?

Google emphasizes the importance of not hiding content, as it may not be counted by search engines. However, Google Cache has shown some discrepancies in understanding certain elements correctly. It's possible that what Google perceives as hidden migh ...

css3dseotransformgooglebot

Creating a Pop-Up on Website Load with HTML, CSS, and Jquery

<script> // utilizing only jquery $(document).ready(function(){ $('#overlay-back').fadeIn(500,function(){ $('#popup').show(); }); $(".close-image").on('click', function() { $('#po ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the process of combining JS functions with PHP echo in code?

I am currently working on creating a popout menu for an array of values that are being displayed from the database. The goal is to show the corresponding popout menu when the svg is clicked, but I am running into an issue where it only works for the first ...

javascriptphphtml

Styling the text of segmented bars in ControlsFX using CSS

Is there a way to customize the size and color of the text for the ControlsFX segmented bar? I've attempted the typical method: -fx-font-size: 15px Unfortunately, it doesn't seem to be effective. Whether it's through CSS or code, I'm ...

javacssjavafxcontrolsfx

A guide to removing a cookie in a Next.js 14 middleware following verification from an external API

I'm currently working on an application using Next.js 14 and I've encountered an issue related to cookie management within my middleware. The main objective is to make a call to an external API to validate the user's token. In case the valid ...

reactjsnext.jscookies

Strange HTML pop-up keeps appearing every time I use styles in my code or insert anything with CSS

Recently, I created an OctoberCMS backend setup through my cPanel (I also have one on my localhost). Now, I am trying to add a background image but every time I attempt to do so, a strange HTML popup appears that I can't seem to figure out. Here is th ...

phphtmlcsscontent-management-systemoctobercms

Best practices for updating the value of a specific key within an object that contains recursion in JavaScript/TypeScript

I have a tree component that uses the following data structure type TreeNode = { id: string, parentId: string, renderer: () => React.ReactNode, expanded: boolean, children?: Array<TreeNode>, } Now, I am looking to add functionality for ...

javascriptreactjstypescriptobjectrecursion

The Joys of Delayed Animation with jQuery Isotope

Has anyone successfully modified the CSS3 transitions in jquery Isotope to incorporate a delay for shuffling items, such as using "transition-delay: 0s, 1s;"? I am aiming for a specific shuffle direction - first left, then down - to create a more calculat ...

jquerycssjquery-isotope

Add the onmouseover attribute to dynamically alter the text

I'm trying to add the onmouseover function to the image of Angelina Jolie in order to change the text above, which currently says "Your Daily Dose of Contrabang". What is the best way to achieve this? Thank you for your assistance. You can check out t ...

htmlcss

How can I vertically align a label placed in a horizontal row in a Material UI grid that includes an InputLabel and Input?

I am working on a React Material UI grid layout with InputLabel's and Input fields displayed in a horizontal row. Here is the code snippet: const Container = (props) => <Grid container {...props} />; const Item = (props) => <Grid item x ...

reactjsmaterial-uivertical-alignment

Is it possible to achieve a FadeIn effect without using the .hide()

Is there a way to achieve a fadeIn effect without interfering with margins when the object is hidden from the document? I would like it to animate from opacity 0, but I am struggling to make it work. Any suggestions or ideas would be greatly appreciated. ...

jquerycssanimationfadeinanimate.css

Object turned into a React element

When the element "not__uploaded" is rendered, it shows up as [object Object]. I'm still learning React and struggling to identify the issue here. The variable 'responseRecieved' serves as a boolean indicator for whether the API call was suc ...

reactjs

Remove a specific line from a PHP script

I have developed a system of alerts that allows users to delete an alert if they choose to do so. Below is the code for the delete button and table: <button type="button" name="Delete" Onclick="if(confirm('Are you sure you ...

phpjquerycssajaxhtml-table

Adjust the appearance of elements depending on whether the user has activated dark mode or

What is the most efficient way to implement both dark and light themes in my Vue app? One option is to create a 'dark.scss' file and use the '!important' property to override styles defined in components. Another option is to utilize pr ...

javascriptcssvue.jsthemes

Issues with clicking on Material React Table cells

Currently utilizing the Material React Table, here is the code snippet: muiTableBodyCellProps: ({cell}) => ({ onClick: (event) => { console.log(event); return handleCellClicked(event); }, }) Although I am able to see ...

reactjsmaterial-react-table

Ways to reload a webpage from the bottom without any animation

It seems common knowledge that refreshing a webpage on mobile devices can be done by pulling down from the top. However, I am looking to shake things up and refresh the page by pulling up from the bottom instead. And I prefer no animations in the process. ...

javascriptjqueryhtmlcsspull-to-refresh

Is it possible to design and implement Materialize CSS inputs without relying on Materialize CSS?'

Is there a method to implement Materialize CSS input elements that include placeholders and icons without directly using the Materialize CSS framework? I prefer not to mix frameworks in order to avoid potential conflicts, as I am already utilizing anothe ...

cssmaterialize

Struggling to position Bootstrap navbar links completely to the right side

The navigation bar link items are not aligning all the way to the right when using mr-auto. It appears like this Here is my HTML template: <nav class="navbar navbar-default navbar-expand-lg navbar-custom"> <div class="navbar-co ...

htmlcssbootstrap-5

Is there a way to track the number of visits by a 'user' to a website?

Looking to hide certain parts of my website from users who have visited more than a specified number of times. The NY Times site has something similar. Utilizing react & firebase for this project. Considered using IP addresses, but it seems to identify l ...

javascripthtml

Clicking on the image "Nav" will load the div into the designated target and set its display to none. The div will

Can someone help me with loading a div into a target from an onclick using image navigation? I also need to hide the inactive divs, ensuring that only the 1st div is initially loaded when the page loads. I've tried searching for a solution but haven&a ...

javascripthtmljquery