引导程序中的中心文本

debugcn 发表于 Dev

罗伯特

我在引导程序中有以下html代码，我想将所有内容居中，但要向左对齐，在此添加一个图像以更好地理解。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<dl class="sp-methods text-center">
	<dt>Free Shipping</dt>
	<dd>
		<ul>
			<li>
				<div class="radio">
					<label for="s_method_freeshipping_freeshipping">
					<input class="radio" type="radio" checked="checked" value="freeshipping_freeshipping" name="shipping_method">Free<span class="price">$0.00</span></label>
				</div>
			</li>
		</ul>
	</dd>
	<dt>Choose Your Shipping Method</dt>
	<dd>
		<ul>
			<li>
				<div class="radio">
					<label for="s_method_my_1">
					<input id="s_method_my_1" class="radio" type="radio" value="s_method_my_1" name="shipping_method">7 Kg<span class="price">$57</span></label>
				</div>
			</li>
			<li class="text-center">
				<div class="radio">
					<label for="s_method_my_2">
					<input id="s_method_my_2" class="radio" type="radio" value="s_method_my_2" name="shipping_method">5 Kg<span class="price">$15</span></label>
				</div>
			</li>
		</ul>
	</dd>
</dl>

一个儿子

这样做，在其中添加包装器<div class="text-center">，将设置text-left为，<dl class="sp-methods text-left">然后添加.sp-methods { display: inline-block; }到CSS

.sp-methods {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="text-center">
  <dl class="sp-methods text-left">
    <dt>Free Shipping</dt>
    <dd>
      <ul>
        <li>
          <div class="radio">
            <label for="s_method_freeshipping_freeshipping">
              <input class="radio" type="radio" checked="checked" value="freeshipping_freeshipping" name="shipping_method">Free<span class="price">$0.00</span></label>
          </div>
        </li>
      </ul>
    </dd>
    <dt>Choose Your Shipping Method</dt>
    <dd>
      <ul>
        <li>
          <div class="radio">
            <label for="s_method_my_1">
              <input id="s_method_my_1" class="radio" type="radio" value="s_method_my_1" name="shipping_method">7 Kg<span class="price">$57</span></label>
          </div>
        </li>
        <li>
          <div class="radio">
            <label for="s_method_my_2">
              <input id="s_method_my_2" class="radio" type="radio" value="s_method_my_2" name="shipping_method">5 Kg<span class="price">$15</span></label>
          </div>
        </li>
      </ul>
    </dd>
  </dl>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。