居中的图标和文本(React Material-UI) [英] Centered icon and text (React Material-UI)

问题描述

我对呈现带有图标和文本的React Material-UI的最佳方式感兴趣，因此它们都是垂直对齐的.目前，它无法按预期工作，尤其是在条件渲染的情况下.

I am interested in best way to present a React Material-UI with icon and text, so it is all vertically aligned. Right now it does not work as expected, especially with conditional rendering.

               <Typography gutterBottom variant="subtitle2" component="h2" align="center">
                 <Grid container direction="row" alignItems="center" wrap="nowrap">
                    {p.numRooms > 0 && (
                      <Grid item xs={2} alignItems="center">
                        <HotelRoundedIcon color="secondary" />
                        {p.numRooms}
                      </Grid>
                    )}
                    {p.area > 0 && (
                      <Grid item xs={2}>
                        <AspectRatioRounded color="secondary" />
                        {p.area}
                      </Grid>
                    )}
                  </Grid>
                </Typography>

推荐答案

您可以在辅助网格中添加容器，使图标和文本垂直对齐.

You can add container in your secondary Grids to make icons and text vertically aligned.

 <Typography gutterBottom variant="subtitle2" component="h2" align="center">
                 <Grid container direction="row" alignItems="center" wrap="nowrap">
                    {p.numRooms > 0 && (
                      <Grid item xs={2} container >
                        <HotelRoundedIcon color="secondary" />
                        {p.numRooms}
                      </Grid>
                    )}
                    {p.area > 0 && (
                      <Grid item xs={2} container>
                        <AspectRatioRounded color="secondary" />
                        {p.area}
                      </Grid>
                    )}
                  </Grid>
                </Typography>

这篇关于居中的图标和文本(React Material-UI)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！