The typography components within material-ui are appearing side by side on the same row

I'm having an issue with my typography components appearing on the same line instead of two separate lines. I've tried various methods to fix it but nothing seems to work.

<div class="center">
            <Typography variant="h1" style={{flexGrow: 1}} gutterBottom>line 1</Typography>
            <Typography variant="h6">line 2</Typography>
 </div>

Despite my efforts, both line 1 and line 2 are displaying on the same line.

Here is the CSS code for center:

.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 500px;
}

Answer №1

To align your items vertically, include flex-direction:column in your CSS. By default, flex wraps children and uses row as the direction. Alternatively, you can eliminate all flex styles and simply apply text-align:center

Answer №2

When referring to the MaterialIU Typography guidelines, it states that text can be enclosed using the Box component:

<Typography component="div" variant="h1">
  <Box>
    line 1
  </Box>
</Typography

<Typography component="div" variant="h6">
  <Box >
    line 2
  </Box>
</Typography>

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

Creating a scrolling background effect using HTML and CSS: ``Background Parallax

I'm trying to keep the background of my HTML document fixed in the upper left corner, so that when a user scrolls through the page, they only see parts of it. Here's the code I'm using: <body style="background-image: url(background.png) ...

How to select a range of years using Material UI DateRangePicker

Is it possible to customize the DateRangePicker to only allow selecting a range from Start Year to End Year? <LocalizationProvider dateAdapter={AdapterDateFns} localeText={{ start: "Check-in", end: "Check-out" }} &g ...

"Enhance the appearance of bootstrap buttons by applying CSS to add shadow and border when the

Working on a frontend project using the React framework and Bootstrap 5.3 for design. Noticing that shadows are deactivated in Bootstrap by default, which means buttons don't display shadows when active as per the Bootstrap v5.0 documentation. Link ...

Concealing a column in a printed output on Internet Explorer 9

Our application features a webgrid with a hidden reference column that is concealed using CSS. While this method works seamlessly on most browsers, we encounter an issue when it comes to printing. In our print.css file, where the column is hidden similar t ...

Assign the link to the button target using Material-UI

I'm attempting to create a button on material-ui.com that, when clicked, opens an external link in a new self window. Any insights on how to achieve this? <Button size="small" color="primary" href="https://example.com/" target="self"> ...

Difficulty changing paper background color with Material UI ThemeProvider

I'm currently working on a React frontend project using Material UI. I've created a basic Paper component and I'm trying to change its background color to match the primary color set in ThemeProvider. Here's the snippet of my code: impo ...

Importing styles from an external URL using Angular-cli

How can I load CSS styles from an external URL? For instance, my domain is domain.eu but my site is located at sub.domain.eu. I want to use styles that are stored on the main domain (common for all sites). The example below does not work: "styles&qu ...

My intention is to ensure that the page is printed with the Background graphics checkbox pre-checked

When using the print button, I typically include the following code: onclick="window.print();" I also came across this code snippet to set a checkbox as checked by default: <style type="text/css" media="print"> * { -webkit-print-color- ...

What is the best way to choose and style every 2 or 3 child elements or sibling elements?

I have a total of 10 children within a parent div. I am currently applying display: 'flex' and flex-direction: 'row' to every pair of children by wrapping them in separate divs with the class 'flex-row'. Is there a more effici ...

Creating a hierarchical visualization in Angular using a JSON object array

I'm currently working on creating a hierarchical view of users. My ultimate goal is to utilize this hierarchy view or something similar. The challenge lies in how the JSON objects used to construct the hierarchy are structured. Here's an example ...

In the realm of HTML Canvas, polygons intricately intertwine with one another

Currently, I am attempting to create multiple polygons from a large JSON file. Instead of being separate, the polygons seem to be connected in some way. https://i.sstatic.net/Ce216.png The project is being developed in next.js. Below are the relevant co ...

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Newbie inquiry: I am interested in creating a small application that can run offline on a desktop computer. The amount of data to be saved is minimal, so I have the option to use a file or some type of database. However, my main question is: What languag ...

Progress bar carousel component based on advancement movements

Here is the mockup I am working with: https://i.sstatic.net/bIepQ.png So far, I have made good progress with this code: https://codesandbox.io/s/codepen-with-react-forked-16t6rv?file=/src/components/TrendingNFTs.js However, I am facing a couple of challe ...

Adjusting the cell size to align with the height of another cell in the same row

Within a table row, I have two cells that contain divs and the height varies due to changing content. Is there a way for one cell to take up 100% height to match the other cell? You can see an example here. The goal is for the second cell and its div to ...

Failure occurred when attempting to redirect in HTML

Within my HTML code snippet, I have included a section that pertains to notifications. The main issue I am encountering is related to the redirection behavior when clicking on the "Home" link inside the designated notification container with the ID "notifi ...

How can I implement MUI Autocomplete if the search term does not match the option label?

How can I filter the options in a Material UI Autocomplete component based on a property of the option value that is not displayed as the label? I want the user to be able to input an item id, like 5141, and have the options filtered to show 'brass pi ...

Vertical centering not functioning as expected due to issues with margin-top and margin-bottom

I'm having trouble centering my red block in the middle of the webpage, with the footer block at the bottom and the white block between them. Oddly enough, margin-top doesn't seem to be working for me, but left and right are functioning fine. Al ...

Avoiding overlapping of div elements in a stacked div layout

I have a challenge with creating a vertical layout of stacked divs. Everything was going smoothly until I encountered the #resume div, which stubbornly stays hidden beneath the table-containing div above it. Despite trying various adjustments to float and ...

When using Firefox, the -moz-transform:scale property allows you to scale the image without impacting its original dimensions

While resizing icons on a sprite sheet by scaling the image with CSS works fine in Chrome, Firefox seems to scale the graphic correctly but it still takes up the same space as the unscaled version. Even though I found -moz-focus-inner which removed some p ...

Tips for managing mouseover events on a row within an HTML table

My HTML code includes a table like the following: <table> <tr class="myClass"> <td>John</td> <td>Smith</td> </tr> </table> I am trying to change the font color, background color, and use a poi ...