banner 728x90

Vertical centering with Flexbox

In Mobile Web Development 25 views
banner 728x90

Vertical centering brother-and-sister child's content is a task that we have long needed on the internet, but always seemed to be much more difficult than it should be. We initially used tables to complete the task and then went on to CSS and JavaScript tricks because the layout of the table was terribly inefficient – yet it seemed that tables were the easiest and most reliable way to get vertical centering. When the vertically aligned CSS property was introduced, I was incredibly excited, but soon noticed that it usually did not do what I wanted.

After playing with flexbox for the DevTools Debugger I discovered that align-items: center; is the hero I always needed.

Let's consider the following HTML markup that contains content from different heights:

Hello!

Pellenteske resident morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibular tortor quam, feugiat vitae, ultret eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultrences mi vitae est. Mauris placerat eleifend leo. Quisque is amet est et sapien ullamcorper pharetra.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Vertical centering with Flexbox

If we want the content of each element to be vertically centered, we can use flexbox and align-items to realize that:

.parent 

Flexbox was always promised to be the savior of the web layout, but seems to have gone a bit in favor of the CSS-grid; I'm just happy that flexbox has repaired the vertical alignment problem that has caused us nightmares for so long!


  •  9 Mind-Blowing WebGL Demo & # 39; s

    9 Mind-Blowing WebGL Demo & # 39; s

    As much as developers hate Flash, we are still playing a little bit to duplicate the animation functions provided to us by Adobe's old technology. Of course we have canvas, a great technology, where I emphasized 9 amazing demo's. Another available technology …

  •  Write simple, elegant and maintainable mediaqueries with Sass
  •  Make a simple slideshow with MooTools

    Make a simple slideshow with MooTools

    An excellent way to add dynamics to each website is to implement a slide show with images or sliding content. Of course, there are numerous slide show plug-ins available, but many of them can be overkill if you want to do a simple slide show without controls or events.

  •  Introduction of MooTools HeatMap

    Introduction of MooTools HeatMap

    It is often interesting to think about where on a particular element, whether it is the page, an image or a static DIV, your users click. With that curiosity in my mind, I created HeatMap: a class of MooTools with which you

<! – can detect, load, save and …]

->

banner 728x90
author
Author: 
    Build a user settings store with AWS AppSync
    Build a user settings store with AWS AppSync
    Amazon Cognito Sync is a service that
    Synchronize user settings for Android with AWS AppSync
    Synchronize user settings for Android with AWS AppSync
    Amazon Cognito Sync is a service that
    Script & Style Show: Episode 10: Dojo
    Script & Style Show: Episode 10: Dojo
    In this episode welcome David and Todd

    Leave a reply "Vertical centering with Flexbox"

    Must read×

    Top