How to align an image to center

Question

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?

Answer 1

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