样式化的组件垂直居中

Question

“col 1 text”无法垂直居中。这是我所拥有的示例：

export const MyComponent = () => {
  return (
    <div>
        <ColOneContainer>
          col 1 text
        </ColOneContainer>
        <ColTwoContainer>
          <div>text that might run one line or two</div>
          <div>text that might run one line or two</div>
        </ColTwoContainer>
    </div>
  );
};

const ColOneContainer = styled.div`
  float: left;
  width: 25%;
`

const ColTwoContainer = styled.div`
  margin-left: 25%;
`;

const ColTwoContainer = styled.div`
  margin-left: 25%;
`;

给出如下输出：

我有多行“MyComponent”，所以我不能使用position: absolute; 谁能帮我将“col 1 text”垂直居中，使其看起来像这样：

Answer 1

你可以试试 table-cell 来实现这个...

 const ColOneContainer = styled.div`
      float: left;
      width: 25%
      display: table-cell; 
      vertical-align: middle;
   '
 ;

也看看http://howtocenterincss.com/