Question

我是html编码的新手。我一直需要帮助在另一个div的中间做一个div。任何人都可以帮助我。

<div class="wrapper">
    <div class="promo">
        <a href="link.com">Get Coupons!</a>
    </div>
</div>

我希望促销活在包装纸的中间。如何告诉代码使其成为中心。我尝试过class =“center”但它不起作用。我尝试过style =“center”但它不起作用。

请。感谢

Answer 1

欢迎来到SO。

本网站已多次询问此问题。实现此目的的最常见方法是将边距设置为自动。

class =＆＃34; center＆＃34;不起作用是因为class属性将属性分配给css和一些。目前你告诉promo div寻找一个不存在的类。这就是你为此创建css的方法。

.promo{
    width: 200px;
    height: 200px;
    margin: auto;
 }

你也可以采取更长的方式：

.promo{
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
 }

Here是一个帮助你入门的工作小提琴。我还添加了text-align: center;，它会将您的文字集中在促销div中！（如果这就是你想要的。）

Answer 2

我假设您希望div在页面上水平居中，您可以将其添加到现有div中：

 style="display: table; margin: 0 auto"

完整代码：

<div class="wrapper">
    <div class="promo" style="display: table; margin: 0 auto";>
        <a href="link.com">Get Coupons!</a>
    </div>
</div>

Answer 3

我建议使用此功能，即使在大多数情况下它不是最好的方法，在其他情况下它是唯一的方法。

$(document).ready(function(){
  $(".center").each(function(){
   var height = parseInt($(this).parent().css("height"));
   var width = parseInt($(this).parent().css("width"));
   $(this).parent().css("overflow", "hidden");
   $(this).css({
     "margin-top" : ( height - parseInt($(this).css("height"))) / 2,
     "margin-left" : ( width - parseInt($(this).css("width"))) / 2
   });
  });
});

只需设置class =＆＃34; center＆＃34;在你需要居中的元素上，你很高兴。

<div class="wrapper">
    <div class="promo center">
        <a href="link.com">Get Coupons!</a>
    </div>
</div>

JSFiddle

在另一个div中创建一个div中心

3 个答案: