我想知道是否有一种方法可以使用HTML将div
元素对齐到页面的中间(最好不要使用CSS)。
代码是
<div class="colorlib-pricing" >
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center colorlib-heading animate-box">
<h2>Pricing</h2>
<p>We set our price with affordability in mind, we do not want to overcharge users for a good client, we find our clients' price reasonable and competitive.</p>
</div>
</div>
<div class="col-md-3 text-center animate-box">
<div class="pricing">
<h2 class="pricing-heading">Wave Client</h2>
<div class="price"><sup class="currency">$</sup>19.99<small>LIFETIME</small></div>
<p>With permanent access, fast and frequent updates Wave Client will surely fulfill your cheating needs.</p>
<p><a href="https://waveclient.selly.store/product/49b4ed5e" class="btn btn-primary">Purchase Wave</a></p>
</div>
</div>
</div>
</div>
</div>
非常感谢。
答案 0 :(得分:0)
<div style="width: 500px; margin: 0 auto;">I will be aligned in the center</div>
如果您真的没有CSS,可以尝试
<div align="center">
<div>I will be aligned in the center</div>
</div>
答案 1 :(得分:0)
尝试在代码周围添加中心标记,如下所示:
<center>
<p>I have been centered</p>
</center>
编辑:有人说<center>
标签已经过时了(它们是正确的),因此请尝试以下操作:
<div style="text-align: center">
<p>I have been centered</p>
</div>
答案 2 :(得分:0)
您需要设置子div边距自动设置。 注意:如果您使用显示属性,则可能不适用于某些显示属性,例如绝对,固定等。
.parentDiv{width:100%;
height:100px;
background: #504f4f;
}
.childDiv{
margin:auto;
width:60%;
background: #85ffcc;
height:100px;
}
<div class="parentDiv" >
<div class="childDiv" >
</div>
</div>
答案 3 :(得分:0)
由于您似乎正在使用引导程序3,因此可以将以下div <div class="col-md-3 text-center animate-box">
更改为:
<div class="col-md-4 col-md-offset-4 text-center animate-box">
请参见下面的工作示例:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="colorlib-pricing">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center colorlib-heading animate-box">
<h2>Pricing</h2>
<p>We set our price with affordability in mind, we do not want to overcharge users for a good client, we find our clients' price reasonable and competitive.</p>
</div>
</div>
<div class="col-md-4 col-md-offset-4 text-center animate-box">
<div class="pricing">
<h2 class="pricing-heading">Wave Client</h2>
<div class="price"><sup class="currency">$</sup>19.99<small>LIFETIME</small></div>
<p>With permanent access, fast and frequent updates Wave Client will surely fulfill your cheating needs.</p>
<p><a href="https://waveclient.selly.store/product/49b4ed5e" class="btn btn-primary">Purchase Wave</a></p>
</div>
</div>
</div>
</div>
另一种方法也可以是使用center-block
类。但是,您还需要在div中添加float: none;
的CSS样式:
<div class="col-md-4 center-block text-center animate-box" style="float: none;">
请参见下面的工作示例:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="colorlib-pricing">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center colorlib-heading animate-box">
<h2>Pricing</h2>
<p>We set our price with affordability in mind, we do not want to overcharge users for a good client, we find our clients' price reasonable and competitive.</p>
</div>
</div>
<div class="col-md-4 center-block text-center animate-box" style="float: none;">
<div class="pricing">
<h2 class="pricing-heading">Wave Client</h2>
<div class="price"><sup class="currency">$</sup>19.99<small>LIFETIME</small></div>
<p>With permanent access, fast and frequent updates Wave Client will surely fulfill your cheating needs.</p>
<p><a href="https://waveclient.selly.store/product/49b4ed5e" class="btn btn-primary">Purchase Wave</a></p>
</div>
</div>
</div>
</div>