Question

我想知道是否有一种方法可以使用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>

非常感谢。

Answer 1

<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>

Answer 2

尝试在代码周围添加中心标记，如下所示：

<center>
    <p>I have been centered</p>
</center>

编辑：有人说<center>标签已经过时了（它们是正确的），因此请尝试以下操作：

<div style="text-align: center">
    <p>I have been centered</p>
</div>

Answer 3

您需要设置子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>

Answer 4

由于您似乎正在使用引导程序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>

需要帮助将div类与中间对齐

4 个答案: