11

RoR プロジェクトで sass とコンパスを使用しています。top要素の CSS プロパティに、要素の高さを -2 で割った値を割り当てる必要があります。SASS\Compassでできますか？

4

4 に答える 4

22

あなたはXYの問題を抱えているようです。解決すべきタスクがあり、そのタスクについて質問する代わりに、試してみてすでに不適切であることがわかっている解決策について質問します。

top要素の高さの半分に等しいプロパティを適用し、否定したいのはなぜですか? 絶対配置された要素をその高さの半分上に移動したいからです。これが元のタスクです。

それを達成するための簡単な解決策があり、SASS は必要ありません! (実際には、要素の高さを知らない限り、SASS は CSS よりも多くのヘルプを提供できません。)

追加のラッパーが必要です。 

<div class=container>
  <div class=elements-wrapper>
    <div class=element>
    </div>
  </div>
</div>

要素をその高さの 50% まで押し上げるには、次の 2 つの簡単な手順を実行します。

1) ラッパーをコンテナから完全に押し出します。 

.elements-wrapper {
  position: absolute;
  bottom: 100%; }

2) 要素をその高さの 50% まで引き下げます。

.element {
  margin-bottom: -50%; }

それでおしまい！

を実行するとmargin-bottom: -50%、実際には要素がラッパーの高さの 50% まで引き下げられます。しかし、ラッパーの高さは要素の高さと同じです!

position: relativeコンテナに適用することを忘れないでください。そうしないと、コンテナposition: absoluteではなくウィンドウに相対的になります。

これはよくコメントされたコードのデモです: http://jsbin.com/uwunal/4/edit

更新日 2013 年 4 月 16 日

これが偽物であることに今気づきました。

CSS では、上マージンと下マージンのパーセンテージはコンテナーの幅を表します。したがって、上記の例は、コンテナーが正方形であるためのみ機能します。

于 2013-03-30T10:20:42.423 に答える
4

これを行う良い方法を見つけました。を使用しています。transform: translate(-50%, -50%)

ここに解決策を詳述するリンクがあります：センタリング要素

于 2013-12-06T15:41:47.427 に答える
3

これを試して：

@mixin flexible-top($elementHeight) {
    top: ($elementHeight / (-2));
}

.yourElement {
    @include flexible-top(yourElementHeight); 
}
于 2013-03-30T06:44:52.087 に答える