web-dev-qa-db-ja.com

Semantic-UIを使用したdivの垂直方向の配置

私はドキュメントのどこにもそれを見つけることができないようです。

セマンティックUIセマンティクスを使用して、ページのdivを垂直方向に中央に配置する方法はありますか？

これが私がやろうとしていることです：

<div class="ui centered grid">
  <div class="eight column wide">
    <div>I want to be centered vertically on a page</div>
  </div>
</div>
htmlcsssemantic-ui
20
Michael Khait

http://semantic-ui.com/examples/grid.html

つかいます middle alignedgridのクラス

37
Uday Hiwarale

middleを使用し、特定の要素に高さを設定することでこれを達成しました。

.holder {
  height: 400px
}
.holder .middle {
  height: 100%
}
<link href="https://raw.githubusercontent.com/Semantic-Org/Semantic-UI/master/dist/semantic.css" rel="stylesheet" />

<div class="holder">
  <div class="ui middle aligned grid">
    <div class="eight column wide">
      <div>I want to be centered vertically on a page</div>
    </div>
  </div>
</div>
5
Simon H

この問題は [〜＃〜] here [〜＃〜] 2018年初めに報告されましたが、クローズされました。

ただし、これを試すことができます：

<div id="my-container" class="ui grid middle aligned">
  <div class="row">
    <div class="column">
      <div class="ui text container segment inverted">
        <h1>My DIV</h1>
      </div>
    </div>
  </div>
</div>

コンテナの高さが十分であることを確認してください

#my-container {
  background: #000;
  height: 100vh;
  width: 100%;
}

JSFiddleで試してください： https://jsfiddle.net/Peyothe/6rjmdu1x/

4
Peyothe