CODEWITHSUNDEEP
htmlcss
user516883
user516883

Reputation: 9378

centering image for phones and tablets

I am creating a splash screen for an application that is built in html5 and css3, and I cannot get the image to be exactly in the middle. I need it to be in the middle for phones and tablets. Thanks for any advice or help.

Image size is 300px by 300px

Upvotes: 1

Views: 218

Answers (2)

Guffa
Guffa

Reputation: 700212

As you know the size of the image, you can use negative margins:

position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;

Upvotes: 2

Blieque
Blieque

Reputation: 675

Images/block elements can be centred using margins:

img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  }

Otherwise you could use the old-school <center> tag technique. It's still in HTML5. ;)

Upvotes: 0

Related Questions