Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertical alignment of a div using Semantic-UI

I can't seem to find it anywhere in the docs.

Is there a way to vertically center a div on the page using Semantic-UI semantics :)

Here is what I'm trying to do:

<div class="ui centered grid">   <div class="eight column wide">     <div>I want to be centered vertically on a page</div>   </div> </div> 
like image 949
Michael Khait Avatar asked Jun 02 '15 18:06

Michael Khait


People also ask

How do you vertically align a div?

To center a div vertically on a page, you can use the CSS position property, top property, and transform property. Start by setting the position of the div to absolute so that it's taken out of the normal document flow. Then set the top property to 50%.

How do I align vertically in CSS?

To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.

Which tag is used for vertical alignment?

HTML | <td> valign Attribute The HTML <td> valign Attribute is used to specify the vertical alignment of text content in a cell. Attribute Value: top: It sets the content to top-align. middle: It sets the content to middle-align.


1 Answers

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

Use middle aligned class on grid

like image 155
Uday Hiwarale Avatar answered Sep 22 '22 15:09

Uday Hiwarale