css - 无法在引导程序上集中 div

问题描述

我正在尝试使用 css 集中 div“状态”。已经尝试使用vertical-align：middle，display：flex，align-item：center，但没有任何效果。有人能帮我吗？它看起来像 div 的高度保持不变，所以我不能集中它，因为它的内容完全填满了整个空间。

import React from 'react'
import { Row, Col } from 'reactstrap'
import styled from 'styled-components'
import Status from './Status'

export default ({ temporadas = [], temporadaSelecionada = {}, onChange = () => {} }) => {
  return (
    <StyledContainer>
      <Row>
        <Col md={12}>
          {temporadas.map(temporada => {
            return (
              <StyledCard selected={temporadaSelecionada.codigo === temporada.codigo}
                onClick={() => onChange(temporada)}>
                <Status className='pull-right' style={{ marginRight: '-8px' }} ativa={temporada.status === 'A'} />
                {/* <StyledIcon className={temporadaSelecionada.codigo === temporada.codigo ? 'fa fa-fw fa-minus' : 'fa fa-fw fa-plus'} /> */}
                <StyledText alt={temporada.descricao} title={temporada.descricao}>{temporada.descricao || '-'}</StyledText>
              </StyledCard>
            )
          })}
        </Col>
      </Row>
    </StyledContainer>
  )
}


const StyledContainer = styled.div`
  margin-bottom: 10px;
`

const StyledCard = styled.div`
  cursor: pointer;
  padding: 16px;
  display: block;
  border: 1px solid #DADFEA;
  background-color: #F4F7FA;
  font-size: 100%

  &:not(:first-child) {
    margin-top: -1px;
  }

  &:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  ${({ selected }) => selected && `
    border-left: 5px solid #C5CBD9;
    padding-left: 12px;
  `}
`

const StyledText = styled.span`
  margin: 0;
`

const StyledIcon = styled.i`
  font-size: 10px;
`

div“状态”是从另一个文件导入的，它的行为如下：

import React from 'react'
import styled from 'styled-components'

export default ({ ativa, label, ...props }) => {
  if (ativa) {
    return (
      <div {...props}>
        <StyledText>
          <StyledLabel>{label}</StyledLabel>
          <i class='fa fa-fw fa-circle text-success' />
          <span>Ativa</span>
        </StyledText>
      </div>
    )
  } else {
    return (
      <div {...props}>
        <StyledText>
          <StyledLabel>{label}</StyledLabel>
          <i class='fa fa-fw fa-circle text-danger' />
          <span>Inativa</span>
        </StyledText>
      </div>
    )
  }
}

const StyledText = styled.small`
  text-transform: none;
`

const StyledLabel = styled.span`
  color: #79919D;
`

我想把那个 div 放在它所在行的垂直中心。有人可以帮我吗？

标签： cssreactjsbootstrap-4

css - 无法在引导程序上集中 div

问题描述

解决方案

推荐阅读