CODEWITHSUNDEEP
css
Tim R
Tim R

Reputation: 524

How to align an image to center

I'd like to set the alignment of an image to the center on top of the header. My ERb file is as follows:

<p id="logo">
  <%= image_tag "logo.png" %>
</p>

In my CSS file, I have:

#logo {
  padding-bottom: 5px;
  alignment: center;
  width: 100px;
  height: 100px;
}

All the CSS code applies except for the alignment. The image still renders to the left of the screen. How can I get the image to align center?

Upvotes: 0

Views: 100

Answers (1)

Sean Huber
Sean Huber

Reputation: 3985

You shouldn't need to add any styles to your <p> element. Instead you should center the <img> child element. Also, there is no CSS property named "alignment". This block will center your image:

#logo > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Example from w3schools: https://www.w3schools.com/howto/howto_css_image_center.asp

Upvotes: 1

Related Questions