html - imagen - centrar texto horizontalmente css
Alineación vertical de un div utilizando la interfaz de usuario semántica (3)
Acabo de lograr esto usando las alturas middle
y determinadas para ciertos elementos:
.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>
Parece que no puedo encontrarlo en ningún lugar en los documentos.
¿Hay una manera de centrar verticalmente un div en la página usando semántica de interfaz de usuario semántica :)
Esto es lo que estoy tratando de hacer:
<div class="ui centered grid">
<div class="eight column wide">
<div>I want to be centered vertically on a page</div>
</div>
</div>
Este problema se informó HERE principios de 2018, pero se cerró.
Sin embargo, puedes probar esto:
<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>
Asegúrate de que tu contenedor sea lo suficientemente alto
#my-container {
background: #000;
height: 100vh;
width: 100%;
}
Pruébelo en JSFiddle: https://jsfiddle.net/Peyothe/6rjmdu1x/
http://semantic-ui.com/examples/grid.html
Use la middle aligned
en la grid