html - 想要垂直对齐页面
问题描述
期望下面的输出需要垂直对齐圆圈并期望箭头指向圆圈。
O-------->O-------->O
垂直对齐,箭头需要直接指向圆圈。还需要支持响应式。
.circle {
background-color: #fff;
border: 3px solid rgb(20, 5, 5);
width: 1.5em;
height: 1.5em;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
}
.center {
text-align: center;
}
.line {
border-bottom: 2px dashed black;
}
.line:after {
content: ">";
color: black;
font-weight: bold;
font-size: 25px;
float: right;
margin-top: -15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br/><br/><br/><br/><br/>
<div class="row">
<!-- start section -->
<div class="col-md-12 center">
<div class="col-md-2 center">
Start
<div class="circle" center></div>
30-07-2018 11:00
</div>
<div class="col-md-3 center">
<div class="line"></div>
</div>
<div class="col-md-2 center">
Middle
<div class="circle" center></div>
30-07-2018 11:00
</div>
<div class="col-md-3 center">
<div class="line"></div>
</div>
<div class="col-md-2 center">
End
<div class="circle" center></div>
30-07-2018 11:00
</div>
</div>
</div>
解决方案
我想你正在寻找这样的。工作演示在这里
.timeline {
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
}
.li {
transition: all 200ms ease-in;
}
.timestamp {
margin-bottom: 20px;
padding: 0px 40px;
display: flex;
flex-direction: column;
align-items: center;
font-weight: 100;
}
.status {
padding: 40px 40px;
display: flex;
justify-content: center;
border-top: 2px solid #D6DCE0;
position: relative;
transition: all 200ms ease-in;
}
.status h4 {
font-weight: 600;
}
.status:before {
content: "";
width: 25px;
height: 25px;
background-color: white;
border-radius: 25px;
border: 1px solid #ddd;
position: absolute;
top: -15px;
left: 42%;
transition: all 200ms ease-in;
}
.li.complete .status {
border-top: 2px solid #000000;
}
.li.complete .status:before {
background-color: #000000;
border: none;
transition: all 200ms ease-in;
}
.li.complete .status h4 {
color: #000000;
}
@media (min-device-width: 320px) and (max-device-width: 700px) {
.timeline {
list-style-type: none;
display: block;
}
.li {
transition: all 200ms ease-in;
display: flex;
width: inherit;
}
.timestamp {
width: 100px;
}
.status:before {
left: -8%;
top: 30%;
transition: all 200ms ease-in;
}
}
html, body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
font-family: "Titillium Web", sans serif;
color: #758D96;
}
<ul class="timeline" id="timeline">
<li class="li complete">
<div class="timestamp">
<span class="author">First Time</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> First Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Second Time</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Second Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Third Time</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4>Third Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">Last Time</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> finished </h4>
</div>
</li>
</ul>
推荐阅读
- jquery - 每次触发 Jquery 初始化函数时都会触发 dom 元素
- angular - 虽然我想将参数放入 url 以获取一些数据,但它会放入 % 而不是 > ?角 9
- scala - 在 Scala 中定义枚举的区别
- fortran - 使用 mpi_f08 模块时调用 mpi_gatherv 后数组的 Lbound 发生变化
- terraform - Terraform 错误从 TF 0.11 升级到 0.12 后计数参数无效
- c# - 如何使用 Kestrel ConnectionHandler 处理传入的 TCP 消息?
- amazon-web-services - 是否可以将文件或文件夹从 AWS Linux EC2 实例下载到本地 Windows 10 机器?
- sql - 从 2 个表的数据计算总价
- php - 用于纠正 SimpleHtmlDom 抓取的网页中损坏的链接的功能
- laravel - Laravel webpackChunkName 在块文件中使用波浪号(〜)字符创建错误的文件夹