css垂直水平线,CSS3使用弹性框实现带水平线标题和垂直线标题

CSS

语言：

CSSSCSS

确定

body {

text-align: center;

}

.heading-vr {

display: -webkit-inline-box;

display: -webkit-inline-flex;

display: -ms-inline-flexbox;

display: inline-flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-align-content: center;

-ms-flex-line-pack: center;

align-content: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-flex-wrap: nowrap;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

height: 100%;

}

.heading-vr:before,

.heading-vr:after {

content: "";

border-left: 2px solid;

height: 100%;

-webkit-box-flex: 1;

-webkit-flex: 1 1 0%;

-ms-flex: 1 1 0%;

flex: 1 1 0%;

}

.heading-vr:before {

margin-bottom: 12px;

}

.heading-vr:after {

margin-top: 12px;

}

.heading-hr {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-align-content: center;

-ms-flex-line-pack: center;

align-content: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-flex-wrap: nowrap;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

}

.heading-hr:before,

.heading-hr:after {

content: "";

border-top: 2px solid;

width: 100%;

-webkit-box-flex: 1;

-webkit-flex: 1 1 0%;

-ms-flex: 1 1 0%;

flex: 1 1 0%;

}

.heading-hr:before {

margin-right: 12px;

}

.heading-hr:after {

margin-left: 12px;

}

.height-200px {

height: 200px;

}