我好像在文档里找不到它。
有没有办法使用语义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>
发布于 2016-06-03 04:42:58
http://semantic-ui.com/examples/grid.html
在grid
上使用middle aligned
类
发布于 2018-09-18 16:46:27
此问题在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/
发布于 2015-08-03 10:27:12
我只是通过使用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>
https://stackoverflow.com/questions/30603780
复制相似问题