Блог

Главная - Вопросы по программированию - Изображение не центрируется

Изображение не центрируется

#css

#css

Вопрос:

Я пытаюсь центрировать изображение с помощью css и html, однако, похоже, мне чего-то не хватает. Мне интересно, может ли кто-нибудь мне помочь. Изображение, которое я пытаюсь центрировать, попадает в #home_top_logos a:

 /* Uncomment the following to hide the site title */
/*
#site_title {
    display: none;
}
*/
}
#home_top_logos {
    width:950px;
    padding-bottom:20px;
    padding-top:77px;
}
#home_top_logos a {

    display:block;
    margin:auto;
    margin-bottom:54px;
    padding: 25px 0px 20px 0;
}
#home_top_logos p {
    width:811px;
    padding-bottom: 50px;
    margin:auto;
    height:75px;
    background:url(../images/old_style_bg1.png) no-repeat;
}
#home_top_logos p a {
    width:366px;
    display:block;
    height:50px;
    line-height:50px;
    color:#616161;

text-align:center;

}

Вот также HTML:

 > <div class="wrapper section" id="home_top" data-key="H">  <div
> id="home">        <div id="home_top_botm_bg">             <div id="home_top_inn">
>               <div id="home_top_logos">
>                   <div id="site_title"><a href="#"><img src="images/retro_img1.png" alt="#" /></a></div>
>                   <p><a href="#">amp;nbsp;</a></p>
>                   <div class="clr"></div>
>               </div>

Комментарии:

1. Также покажите соответствующий HTML.

2. И, пожалуйста, добавьте jsfiddle.net

3. проверьте это: jsfiddle.net/mostafaznv/xZ6Pn

4. это не сработало, спасибо mostafaznv

5. все эти ответы работают нормально… :/

Ответ №1:

вы должны использовать dispaly:block и margin:0px auto

ДЕМОНСТРАЦИЯ

CSS:

 #home_top_logos img {
    display:block;
    margin:0 auto;
}

другой способ:

установить width для img и использовать left или right для этого

ДЕМОНСТРАЦИЯ

CSS:

 #home_top_logos img {
    position:absolute;
    width:40%;
    left:30%;
}

Комментарии:

1. Это отбросило его за изображение ниже

Ответ №2:

добавьте это:

 #home_top_logos a {
    text-align:center;
}

#home_top_logos a img {
    display:inline-block;
}

пример

Комментарии:

1. это работает здесь: jsfiddle.net/F5av6/3 , обратите внимание, что я удалил ширину из #home_top_logos, чтобы центрирование было более четким без прокрутки..

2. * Кроме того, это относится только к горизонтальному центрированию .. если вы говорите о вертикальном центрировании, сообщите нам

3. Должно быть что-то, чего мне не хватает

Ответ №3:

Вам нужно добавить width:100%; и text-align:center; чтобы это сработало.

 #home_top_logos a {
    width:100%;
    text-align:center;
    display:block;
    margin:auto auto 54px auto;
    padding: 25px 0px 20px 0;
}

Комментарии:

1. в этом нет текста, хотя это изображение?

2. да @user3528624, если мы используем выравнивание текста по центру в div, а его ширина установлена на ширину: 100%; тогда он будет центрировать все содержимое в div, включая изображения. приведенный выше код работает для меня. пожалуйста, добавьте этот css и удалите старый, а затем проверьте его.

Ответ №4:

Добавьте display:block; и margin: auto; к вашему изображению тоже:

http://jsfiddle.net/F5av6/5/

 #home_top_logos img {
    display:block;
    margin:auto;
}

Комментарии:

1. Это определенно работает для меня. Я обновил HTML с вашим. Изображение центрируется в контейнере jsfiddle.net/F5av6/5