Are there any known ways to center a <div>
tag using Semantic UI's web development framework, without adding my own CSS styles?
I have tried several position-related tags in the documentation, such as <div class="centered grid'>
, however these only work for horizontal centering.
This is not a case of challenging implementation, I am just surprised something as common as vertical centering isn't included within a web development framework, and I am curious if my Google searches and eyes have glazed over it. I would prefer to comply to the framework styles before creating custom styles. I know that there are several methods to implement my own vertical centering (this is the least preferable option in my opinion to implement), however I would prefer to use a class from the framework.
As per Semantic UI v2.2.2, you can force vertical alignment in the middle by adding middle aligned
class(es). It affects the following elements:
You cannot set vertical alignment in the middle that way to an arbitrary div
element, outside any of these structures.
Otherwise, some other Semantic UI elements align their content vertically in the middle by default:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With