Центрирование изображения внутри div - PullRequest
Новая
       6

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

10 голосов
/ 25 января 2010

Я уже установил границу изображения в пределах 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;
}

Ответы [ 6 ]

23 голосов
/ 25 января 2010

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

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

banner img {
    border: none;
    display: block;
    margin: 0 auto;
}
2 голосов
/ 25 января 2010

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

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

0 голосов
/ 30 марта 2016

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

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

Чтобы выровнять изображение по центру по горизонтали по центру. 

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

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

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

(2) * * +1011 

.div {
display:flex
}

.div > img {
margin: auto
}
0 голосов
/ 25 января 2010

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

0 голосов
/ 25 января 2010

Или 

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

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

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

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

0 голосов
/ 25 января 2010

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

text-align:center;

:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...