我似乎无法在文档中的任何地方找到它。
有没有办法使用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>
http://semantic-ui.com/examples/grid.html
在middle aligned
上使用grid
类
我刚刚通过使用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>
这个问题在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/