使用Semantic-UI垂直对齐div

时间:2015-06-02 18:28:00

标签: html css semantic-ui

我似乎无法在文档中的任何位置找到它。

有没有办法使用Semantic-UI语义在页面上垂直居中div:)

以下是我要做的事情:

CallableStatement proc_stmt = connection.prepareCall(" {? = call F_CHK_PREVIOUSLOAD(?)}");     
proc_stmt.registerOutParameter(1, OracleTypes.NUMBER);
proc_stmt.setLong(2, Id); 
proc_stmt.execute();
//  ... your succeeding code

3 个答案:

答案 0 :(得分:35)

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

middle aligned

上使用grid课程

答案 1 :(得分:5)

我刚刚通过使用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>

答案 2 :(得分:4)

该问题已于2018年初HERE报道,但已结束。

但是,您可以尝试以下方法:

<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/