Demo

Question

我正在尝试使用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="#">&nbsp;</a></p>
>                   <div class="clr"></div>
>               </div>

Answer 1

添加display：block;和保证金：自动;对你的形象也是如此：

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

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

Answer 2

添加：

#home_top_logos a {
    text-align:center;
}

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

example

Answer 3

您必须使用dispaly:block和margin:0px auto

Demo

<强> CSS：

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

另一种方式：

为width设置img，然后使用left或right

Demo

<强> CSS：

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

Answer 4

您需要添加宽度：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;
}

图像不居中

4 个答案:

Demo

Demo