上一篇Flexbox布局(3)
css居中问题,老生常谈。这里试着flex布局一番,看看flex居中实现起来效果如何。实现下面效果:
使用以下要点:
display: flex
:肯定要来一个flexbox嘛。flex-direction: column
:竖直方向摆放子元素。align-items: center
:“串糖葫芦”,居中效果justify-content: center
:子元素之间仅仅相靠,不撑开。与Flexbox布局(3)中的content: space-between
效果刚好相反。
<link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<style>
.centered-prompt {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
padding: 10px;
font-family: Raleway,Helvetica,sans-serif;
}
.centered-prompt-item + .centered-prompt-item {
margin-top: 5px;
}
.centered-prompt-icon {
font-size: 60px;
}
.centered-prompt-item {
color: #BCD2DA;
}
.centered-prompt-botton {
padding: 5px 15px;
color: #FFF;
background-color: #4EBBE4;
border: 1px solid #16A2D7;
border-radius: 4px;
}
</style>
<div class="centered-prompt">
<div class="centered-prompt-item centered-prompt-icon">
<div class="icon fa fa-smile-o"></div>
</div>
<div class="centered-prompt-item">
<h1>welcome to the app</h1>
thanks for signing up. let take a look around.
</div>
<div class="centered-prompt-item centered-prompt-botton">
begin tour
</div>
</div>
下一篇flexbox布局(5)