text 只需一行SCSS就可以垂直和水平对齐或只是垂直对齐,它同时支持两者。
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text 只需一行SCSS就可以垂直和水平对齐或只是垂直对齐,它同时支持两者。相关的知识,希望对你有一定的参考价值。
<div class="card center-both">
<p>center <strong>both</strong></p>
</div>
<p>@include center(<strong>both</strong>);</p>
<div class="card center-vert">
<p>center <strong>vert</strong>ically only</p>
</div>
<p>@include center(<strong>vert</strong>);</p>
@mixin center($center-all) {
position: absolute;
@if $center-all == both {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@else {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
/* mixin usage */
.center-both p {
@include center(both);
}
.center-vert p {
@include center(vert);
}
/* demo styles */
body {
text-align: center;
}
.card {
position: relative;
width: 20em;
height: 10em;
margin: 2em auto 1em;
background: #00FFFF;
}
p {
margin: 0;
strong { color: #0080FF; }
}
以上是关于text 只需一行SCSS就可以垂直和水平对齐或只是垂直对齐,它同时支持两者。的主要内容,如果未能解决你的问题,请参考以下文章
scss 垂直和水平对齐SASS mixin
将多个 div 对齐一行并将文本垂直和水平居中
div的水平和垂直对齐
css基础文本对齐,水平对齐,垂直对齐
CSS入门知识-图片水平对齐技巧
div里三个div排列对齐问题。