我是html编码的新手。我一直需要帮助在另一个div的中间做一个div。任何人都可以帮助我。
<div class="wrapper">
<div class="promo">
<a href="link.com">Get Coupons!</a>
</div>
</div>
我希望促销活在包装纸的中间。如何告诉代码使其成为中心。我尝试过class =“center”但它不起作用。我尝试过style =“center”但它不起作用。
请。感谢
答案 0 :(得分:1)
本网站已多次询问此问题。实现此目的的最常见方法是将边距设置为自动。
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中! (如果这就是你想要的。)
答案 1 :(得分:0)
我假设您希望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>
答案 2 :(得分:0)
我建议使用此功能,即使在大多数情况下它不是最好的方法,在其他情况下它是唯一的方法。
$(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>