From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Vertically aligned columns

Vertically aligned columns - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Vertically aligned columns

“

- [Chris] Hi, this is Chris Converse, and this episode we'll set two anchor links which contain a background image to display in columns using flex properties. Then we'll vertically center the content. If you'd like to follow along, download the exercise files, and we'll begin by opening the HTML file in the text editor. In the HTML file I just want to quickly show you what's going on with the links. If we scroll down there are two anchor links inside of the section element showing up down here. They have a background image assigned inline right here and their labels showing up here. Again, they're inside of the section element. In order to display these in columns and then center the content, we'll need to go back to the exercise files and open up style.css in our text editor. Now inside of the CSS file let's scroll down. Let's find the rule that targets the section element. What we're going to do here is set a display type. Let's change the display type to flex, so display colon…

Contents