From the course: CSS Shorts

Unlock this course with a free trial

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

Vertical and center

Vertical and center - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Vertical and center

“

- [Chris] Hi, this is Chris Converse, and in this episode, we'll take a look at vertically centering text within a parent element. While there are a few ways you can do this, either using margin and padding or flex display properties, one of the most efficient ways is to use the table display properties in CSS, allowing us take advantage of a table cell without the rigid and extraneous HTML of an actual table. So if you'd like to follow along with me, download the exercise files, and let's begin by opening index.html in a text editor. Now once you have the HTML file open, you'll see up in the heading area here we have a link to style.css, which we'll open in a few minutes. And inside the body area we have a main article element, and in here we have an aside. Now it's the aside element here where I want to center vertically these two paragraph elements. Now to take a look at the layout so far, you can take index.html and open this up in a browser. And then once in the browser, you'll…

Contents