【问题标题】:Vertical alignment of a div using Semantic-UI使用 Semantic-UI 垂直对齐 div
【发布时间】:2015-06-02 18:27:59
【问题描述】:

我似乎在文档中的任何地方都找不到它。

有没有办法使用 Semantic-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>

【问题讨论】:

标签: html css semantic-ui


【解决方案1】:

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

grid 上使用middle aligned

【讨论】:

  • 注意:如果ui grid之前有ui container标签middle aligned不能正常工作,删除ui容器,它会工作,thanx。
【解决方案2】:

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/

【讨论】:

  • 感谢 class="ui grid centered middle aligned" 为我工作
【解决方案3】:

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

【讨论】:

  • 不起作用。我不知道它是否曾经,但如果你运行 sn -p,你会看到文本不是垂直居中的。
猜你喜欢
  • 2012-09-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多