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排列对齐问题。