Question

如何将div放在具有背景图像的id="social_links"列表中心。我使用margin:0 auto，但li图片未对齐居中。这个代码有什么问题。

HTML

     <body>
       <div class="container-fluid">
        <div class="row" id="teampage_row1">
          <div id="photosdiv">
                <ul>
                    <li class="prof-container" id="firstperson">
                        <div id="firstperson_div">
                           <div class="bio-info" >
                                <p>text when hovered over the background image of thi div</p>
                           </div>
                        </div>
                        <div id="firstperson_name">Raja Muthaya</div>
                        <div id="firstperson_work">Bootloader </div>

                        <div id="social_links"> 
                            <ul>  <!-- this should be aligned centre -->
                                <li id="FP_fb"><a href="#" title="Facebook profile"></a></li>
                                <li id="FP_gplus"><a href="#" title="google plus profile"></a></li>
                                <li id="FP_stackoverflow"><a href="#" title="stackoverflow profile"></a>                           </li>
                                <li id="FP_linkedin"><a href="#" title="linkedin profile"></a></li>
                            </ul>
                        </div>

                    </li>

                </ul>
            <div>

        </div> <!-- row closing -->
      </div> <!-- container closing -->
     </body>

CSS

#social_links{
    position:relative;
    left:-10px;


}
#social_links ul{
    list-style-type: none;
    background-color:red;
    height:30px;
    margin:0 auto;

}
#social_links ul li{
    float:left;
    height:26px;
    width:26px;
}

#FP_fb{
background: url("images/facebook_static.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

#FP_fb:hover{
background: url("images/facebook_hover.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

Answer 1

你可以在CSS部分中使用这样的

#FP_fb{ 
background-image: url('images/facebook_static.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; 
}

#FP_fb:hover{
background-image: url('images/facebook_hover.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

以div为中心列表的背景图像

1 个答案: