Центрирование изображения в div

Я уже установил границу изображения внутри div равным none. Теперь я хочу сосредоточить этот образ внутри его содержащего div. Я попытался использовать margin: 0 auto;, но это не сработало.

Я уверен, что я пропущу что-то глупое, но я хотел бы заручиться поддержкой сообщества stackoverflow, так что мне не хватает часа, чтобы посмотреть на экран, чтобы понять. Большое спасибо.

<body>
    <div id="wrapper">
        <div id="banner">

            <img src="logo3.png"/>
            <!--<img src="kslf_logo.png"/>
            <img src="logo2.png" title="Katie Samson Lacrosse Festival Logo"/>-->


            <div id="social_network">
                <a href="#" target="_blank" title="Check out the Facebook Page!">Facebook</a>
            </div>

        </div>
    </div>
</body>

Вот CSS...

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

#banner img {
    border: none;
    margin: 0 auto;
}

Ответы

Ответ 1

Попробуйте установить для изображения display свойство block:

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

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

Ответ 2

Применение text-align: center к вашему баню div будет центрировать его встроенных и встроенных блоков (в том числе img).

Причина, по которой ваш код не работал, состоит в том, что margin: 0 auto будет только центральными элементами блока.

Ответ 3

горизонтально: просто попробуйте

text-align:center;

:)

Ответ 4

Либо

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

или если img имеет определенный размер, то

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

будет работать.

Ответ 5

Я считаю, что это просто margin: auto;. Нет нулевого значения.

Ответ 6

После многих исчерпывающих попыток выровнять изображение по центру в div (по вертикали и/или по горизонтали) я понял следующее.
Чтобы выровнять по центру по вертикали изображение в div.

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

Для горизонтального центрирования выровняйте изображение в div.

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

Для центрирования изображения по центру как по вертикали, так и по горизонтали, есть 2 варианта (1)

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

(2)

.div {
display:flex
}

.div > img {
margin: auto
}