Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

How to center an image img in HTML using CSS

Daniel Walter Scott

Download Exercise Files Download Completed Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_webess_21

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Hi there, this video we're going to take our image, that's default, sliding to the left, and change it to, into the middle, yay, it's easy, let's jump in and do it. 

So we want to center this image inside the Header. The easiest way to do it in this case is, the Header, let's have a look at our design. We'll center everything that's inside of it, because that's the only thing in this Header, there's nothing in this-- the Navigation's outside of the Header box, it's just an image, so it's nice and easy. So let's find the Header, Style, over here. Let's align it to the center, and we'll use Text Align, and you're like, "Hey, why are you using Text Align, Center." That's just the way it is. 

Text Align Center works really good for, horizontally? I get this wrong all the time, horizontal, vertical, you know what I mean, in the middle, that way. Text Align Center works really well. Let's test it, preview in the browser. And inside of my Header everything is Text Align:Center. 

All right, that is how to get our little image in the middle. Let's move on to the-- let's start working with some of the text in this document. Next video, please.