0

フッターに画像を配置しましたが、中央に配置したいのですが、機能しません。画像を中央に配置したいので、誰かが私のコードを確認するのを手伝ってくれることを願っています。

HTML

<div class="center">
                <ul>
                    <li><a href="#" target="_blank" class="centering_"></a></li>

                </ul>
            </div>

CSS：

.center 
{
    width: 84px;    
    margin: 0 auto;
}
.center ul 
{
    width: 209px;
    line-height: normal;  

}
.center ul li 
{
    float: left;
    margin-right: 11px;

}
.center ul li.last 
{
    margin-right: 0px;
}
.center ul li a
{   
    display: block;
    height: 33px;
    width: 33px;
}

.centering_ {background: transparent url('../images/hello.png') no-repeat;}

編集：これはjsFiddleの例です：http：//jsfiddle.net/XJbaM/

私のコードでは、フッターに2つのアイコンがあります。必要なのは、フッターの中央にある右のアイコンを削除することです。アイコンの上のテキストはすでに中央に配置されています。

解決済み

4

2 に答える 2

3

このようなラッパーdivを追加します。

<div>
  <ul>
      <li>
          <div class="wrapper">
              <a href="img"></a>
          </div>
      </li>
  </ul>

およびラッパーのcss：

.wrapper {
       margin:0 auto;
       width: /* how big your img is PX EM % etc */;
       text-align:center;
}

私はこれを私のブラウザでテストしました、そしてそれは動作します。これが私が使用した正確なコードです：あなたと私のものの混合

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.center 
{
    width: 784px;    
    margin: 0 auto;
    border: 1px solid #000;
}
.center ul 
{
    width: 709px;
    line-height: normal;  

}
.center ul li 
{
    float: left;
    margin-right: 11px;
    border: 1px solid #000;
    width:500px;

}
.wrapper {
    margin:0 auto;
    width:500px;
    text-align:center;
}
.center ul li.last 
{
    margin-right: 0px;
}
.center ul li a
{   
    display:inline-block;
    height: 33px;
    width:100px;
}
.clear {
    clear:left;
}

.centering_ {background-image:url(img/activenav.png);
background-repeat:no-repeat;}
</style>
</head>

<body>
<div class="center">
                <ul>
                    <li><div class="wrapper"><a href="#" target="_blank" class="centering_"></a></div></li>

                </ul>
            <div class="clear">ss</div>
            </div>  
</body>
</html>

今、私の海賊は戦利品ですか？

于 2013-02-08T14:03:06.220 に答える
-5

タグ<CENTER>と</CENTER>をdiv全体の周りに配置します。divを中央に配置します。

<CENTER>
<div class="center">
                <ul>
                    <li><a href="#" target="_blank" class="centering_"></a></li>

                </ul>
            </div>  
</CENTER>
于 2013-02-08T13:54:23.913 に答える