居中一个格内的div

我知道这应该是一件相当容易的事情，但由于某种原因，我遇到了问题，不知道为什么。我在画廊下添加了一个控制器，您可以使用它来滚动浏览幻灯片，并需要以幻灯片为中心。居中一个格内的div

这是代码的样子ATM：

<div class="control_wrap" style=""> 
    <div class="gallery_controls" style=""> 
     <a target="_blank"></a> <a target="_blank"></a> <a target="_blank"></a> 
    </div> 
</div>

CSS：

.control_wrap{ 
    float:left; 
    width:100%; 
} 

.gallery_controls{ 
    margin:0 auto; 
    float:left; 
    width:50%; 
}

让我知道，如果你需要的信息了。

谢谢。

来源

2012-03-19 JDavies

为什么'float：left;'？ – hjpotter92 2012-03-19 11:07:06

float＆margin：0 auto;不在一起工作 – sandeep 2012-03-19 11:14:42

更新了我的答案以反映您的需求。 – Christoph 2012-03-19 11:30:32

您必须摆脱位于.gallery_controls上的float：left。保证金：0汽车将无法正常工作。

来源

2012-03-19 11:04:45

好的，所以我已经去除了两个div上的浮动并添加了一个高度，但现在由于某些原因，元素浮动在库的顶部。 – JDavies 2012-03-19 11:13:12

你会想要保持在父容器上的浮动。只需在.gallery_controls中删除它即可。 – 2012-03-19 12:39:36

为了使margin:0 auto;正常工作，您必须在该div上指定宽度并省略浮动。

如果您还想垂直居中您的div，您需要在div上的position:absolute或在vertical-align:middle的父div上的display:table-cell。

事情是这样的：

parent{ 
    position:relative; 
} 

child{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    width: <your-width>; 
    height: <your-height>; 
    margin-left: <your-width>/2; 
    margin-top: <your-height>/2; 
}

Example fiddle

来源

2012-03-19 11:05:31 Christoph

尝试删除浮动从该类左：

.gallery_controls{ 

margin:0 auto; 
/*float:left;*/ 
width:50%;

}

来源

2012-03-19 11:05:52 Gurvinder

你的CSS更改为这样的事情：

.control_wrap { 
    float:left; 
    width:100%; 
} 
.gallery_controls { 
    margin:0 auto; 
    float: left; 
    text-align:center; 
    width:50%; 
}

结果http://jsfiddle.net/AmAMP/1/

来源

2012-03-19 11:08:37 hjpotter92

没有'float：center' – Christoph 2012-03-19 11:11:01

因此第一个单词：** Change **。如输出页面所示！ – hjpotter92 2012-03-19 11:12:43

再次，没有'float：center'，只有'left'，'right'或'none'被允许作为关键字。 – Christoph 2012-03-19 11:14:03

我已经更新看你CSS请查看： -

.gallery_controls{ 
    margin:0 auto; 
    width:50%; 
    height:50px; 
    background:red; 
}

，或者你可以看到活生生的例子更容易理解： - http://jsfiddle.net/cPk53/5/

来源

2012-03-19 11:16:43

-1

使用改为表格。对于div，外观和感觉会因浏览器而异。一旦你觉得你已经完成了它，加载到另一个浏览器或浏览器的旧版本将打破你的幻想。

来源

2012-03-19 11:19:40

-1表格用于表格数据。你有没有在这里看到？ – Christoph 2012-03-19 11:23:04

div是否为中心对齐？ – 2012-03-19 11:33:52

'div'是一个没有特殊语义注释的通用块元素，而'table'则被指定用于表格数据的表示。特别是对于布局结构化的'table'应该避免，因为它滞后于'div'所能实现的灵活性。请参阅[ZenGarden]（http://www.csszengarden.com），了解'div'-Layout的灵活性。 – Christoph 2012-03-19 12:36:00

居中一个格内的div

回答

相关问题