Question

我的网页顶部有一个标题。

下面是另一个div，我想要位于屏幕中央，宽度为960px，但第二个div显示在最右边。

标题菜单中还有下拉菜单，也无法点击。

以下是示例HTML ..

 <div class="header-wrapper">
   //Mark up for header with drop-down.
 </div>

 //Second Div ..
 <div id="slideshow-carousel" class="center">               

 </div>

CSS ..

.header-wrapper {
  background: url("../img/new_images/bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
  z-index: 60001;     
  width: 100%;
  height: 77px;
  margin: 0 auto; 
}


.center {
  margin-left:auto;
  margin-right:auto;
  width:960px;; 
}

第二个DIV的完整标记

<div id="slideshow-carousel" class="center">                
        <ul id="carousel" class="jcarousel jcarousel-skin-tango">
            <li><a href="#" rel="p1"><img src="img/new_images/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p2"><img src="img/new_images/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p3"><img src="img/new_images/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p4"><img src="img/new_images/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p5"><img src="img/new_images/" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p6"><img src="img/new_images/web.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p7"><img src="img/new_images/.jpg" width="960" height="583" alt="#"/></a></li>
        </ul>
    </div>

这是完整的CSS

 .center
        {
            margin-left:auto;
            margin-right:auto;
            width:960px; 
            height: 565px;
        }


        #slideshow-carousel {

            width:960px;
            position:relative
        }

        #slideshow-carousel ul {
            margin:0; 
            padding:0;
            list-style:none;
        }

        #slideshow-carousel li {
            background:#fff; 
            height:583px; 
            position:relative
        }

        #slideshow-carousel li .arrow {
            left:3px; 
            top:28px; 
            position:absolute; 
            width:20px; 
            height:40px; 
            background:url(images/arrow_white.png) no-repeat 0 0; 
            display:block;
        }

        #slideshow-carousel li a {
            background:#000; 
            display:block; 
            width:960px; 
            height:583px;
        }


        #slideshow-carousel .active {
            filter:alpha(opacity=100); 
            -moz-opacity:1.0; 
            -khtml-opacity: 1.0; 
            opacity: 1.0;
        }

        #slideshow-carousel .faded {
            filter:alpha(opacity=50); 
            -moz-opacity:0.5; 
            -khtml-opacity: 0.5; 
            opacity: 0.5;
        }

并且

Answer 1

您的div是block元素，它占用整个可用的窗口宽度。因此没有空间可以居中对齐它。只需给它一个小于窗口宽度的宽度，它就会根据你当前的css自动居中对齐。

旁注：不要忘记添加height或内容，否则您根本看不到<div> ..

Answer 2

试试这个：

<强> CSS

.center
{
    display: block;
    margin: 0px auto;
    width:960px; //Edit the size you want
    text-align: center;
}

<强> HTML

<div class="header-wrapper">
      //Mark up for header with drop-down.
</div>

<div id="slideshow-carousel" class="center">               
      //Second div
</div>

<强> DEMO HERE

将Div定位在div下面的网页中心

2 个答案: