Как я могу выровнять мои элементы по вертикали в строке сетки материалов? - PullRequest
Новая
       60

Как я могу выровнять мои элементы по вертикали в строке сетки материалов?

0 голосов
/ 03 мая 2020

Я использую компонент Grid Material UI для отображения трех элементов подряд. Я хотел бы выровнять элементы по центру по вертикали, но у меня неутешительно трудное время для этого. Очевидно, "justifyContent: 'center'" только центрирует элементы по горизонтали. Я обнаружил, что 

const styles = (theme) => ({
  root: {
    textAlign: "left",
    margin: theme.spacing(2),
    paddingBottom: theme.spacing(1),
    color: theme.color.secondary,
  },
  cardHeader: {
    paddingBottom: theme.spacing(0),
  },
  cardContent: {
    width: "100%",
    paddingBottom: theme.spacing(1),
  },
  rowBody: {
    width: "100%",
    flexWrap: "nowrap",
    alignItems: "center",
    justifyContent: 'center',
  },
...
      <CardContent className={classes.cardContent}>
        <Grid container className={classes.rowBody} spacing={1}>
          <Grid item>
            <img height="20" src={require('../../img/apple.svg')} alt="" />
          </Grid>
          <Grid item>
            {title}
          </Grid>
          <Grid item className={classes.infoIcon}>
            <InfoIcon />
          </Grid>
        </Grid>

производит следующее.

enter image description here

Как я могу выровнять мои элементы по вертикали, не выровняв их по горизонтали?

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

Svg и img элементы имеют display: inline-block. Инлайн-блок имеет нижний зазор. Вам просто нужно изменить дисплей, чтобы заблокировать.

Я создал Песочница в качестве примера

0 голосов
/ 03 мая 2020

[Редактировать] : Исходя из ответа Кирилла (спасибо за песочницу), вот о чем я думал: 

import React from "react";
import { Grid } from "@material-ui/core";
import { Error } from "@material-ui/icons";

export default function App() {
  return (
    <Grid container spacing="1" alignItems="center">
      <img
        src="https://yt3.ggpht.com/a/AATXAJxK3dHVZIVCtxjYZ7mp77wBbCs9fw4zU46V_Q=s288-c-k-c0xffffffff-no-rj-mo"
        alt="no-src"
        height="20px"
      />
      <span style={{ padding: 5 }}>no title supplied</span>
      <Error />
    </Grid>
  );
}

Не могли бы вы поставить свой три элемента в одной сетке? Это было бы проще сделать, и ваш реальный код работал бы.

Если нет, ваша сетка может быть выровнена, но содержимое не потому, что она не является прямым потомком гибкого контейнера. попробуйте добавить display: table-cell; verticalAlignment:center к вашему элементу сетки (или его содержимому, поместив его в div с шириной и высотой до 100%)

...