vertical texto imagen horizontalmente horizontal formulario div contenido centrar alinear html css semantic-ui

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/