Centering an image within a div

Question

I have already set the border of an image within a div to be none. I now want to center that image within its containing div. I have tried using the mar

Answer 1

Try setting the image’s display property to block:

banner {
    height: 100px;
    width: 960px;
    padding-bottom: 10px;
}

banner img {
    border: none;
    display: block;
    margin: 0 auto;
}

Answer 2

horizontal: just try

text-align:center;

:)

Answer 3

I believe it is just margin: auto;. No zero needed.

Answer 4

Either

banner {
     height:100px;
     text-align:center;
     width:960px;
     padding-bottom:10px;}

or if the img is of specific size then

banner img {
         display:block;
         width: <somevalue>px;
         border:none;
         margin:0 auto;
         }

will work ..

Answer 5

After many exhaustive tries to center align an image in a div (vertically and/or horizontally), I understood the following.
To vertically center align an image in a div.

.div {
 display:flex;
justify-content:center
}

To horizontally center align an image in a div.

.div {
display:flex;
align-items:center;
}

To center both vertically and horizontally an image in a div, there are 2 options (1)

div {
display:flex;
align-items:center;
justify-content:center;
}

(2)

.div {
display:flex
}

.div > img {
margin: auto
}

Answer 6

Applying text-align: center to your banner div will center its inline and inline-block children (which encompasses the img tag).

The reason why your code wasn't working is because margin: 0 auto will only center block elements.