javascript - Css flex显示未垂直对齐div内的元素
问题描述
我正在尝试构建一个简单的卡片来显示一个按钮和一个文本。
我无法正确对齐。可能是 CSS 过载过多。
看起来像:
我只希望内容与文本和文本下方的按钮垂直和水平居中
这是代码:
import React from 'react';
import {Button} from 'react-bootstrap';
import './EmptyTile.css';
class EmptyTile extends React.Component {
render() {
return (
<div className="empty-tile">
<h1>{this.props.text}</h1>
<Button bsPrefix="button-empty-tile" href={this.props.url}>Start</Button>
</div>
);
}
}
export default EmptyTile;
和CSS
.empty-tile {
width: 240px;
height: 360px;
border-radius: 20px;
box-shadow: 0px 8px 18px 0 rgba(0,0,0,0.14);
align-items: center;
text-align: center;
justify-content: center ;
display: flex;
}
.empty-tile h1 {
font-family: Fredoka One;
font-size: 18px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: -0.44px;
text-align: center;
color: #cacaca;
padding-left: 15px;
padding-right: 15px;
}
.button-empty-tile {
border-radius: 21px;
background-color: #f4f7f8;
border-color: #cacaca;
font-family: Source Sans Pro;
font-size: 16px;
text-align: center;
color: #cacaca;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 20px;
padding-right: 20px;
}
任何想法 ?代码很简单
解决方案
添加flex-direction: column
到.empty-tite
应该可以解决问题。
.empty-tile {
width: 240px;
height: 360px;
border-radius: 20px;
box-shadow: 0px 8px 18px 0 rgba(0,0,0,0.14);
align-items: center;
text-align: center;
justify-content: center ;
display: flex;
flex-direction: column; // by default, flex-direction is row
}
...
看看这个 Code Sandbox链接,如果这是你要找的。
推荐阅读
- algorithm - 简化 Quickgraph 中的功能和良好的文档?
- android - 获取生成的复选框选中状态
- css - FontAwesome v5 - 将图标添加到带有输入的按钮中(FA v4 中的方法不再起作用)
- jquery - Jquery如何在页面加载时启动功能并等待5秒?
- android - 将照片移动到应用程序内存中
- jquery - cakePHP:主要滞后问题
- arrays - 程序集 8086 (IA32) 添加两个数组的元素时遇到问题
- javascript - 滚动 Div 函数动画
- c++ - 如何在 Qt 5 for Windows 中以编程方式处理交互式 CLI
- reporting-services - SSRS 日期参数解释问题