2016-04-24 67 views
0

我在引導程序中有以下html代碼,我想將所有內容居中,但對齊左側,我在此添加一張圖片以更好地理解。引導中的中心文本

enter image description here

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

+0

您的代碼段已經看起來居中對齊。 –

+0

但不是在左邊,我想要居中,但在中心對齊左邊 – Robert

+0

好。那麼只需使用:'margin:0 auto;' –

回答

1

做這樣的,在其中添加一個包裝,<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>

+0

是完美的LGSon非常感謝你,你的代碼工作就像一個魅力 – Robert

0

最簡單的方法是給它一個固定的寬度,並使用margin: 0 auto

.sp-methods { 
    width: 700px; 
    margin: 0 auto; 
} 
+0

謝謝,但我不能在那裏固定寬度,是與bootstrap和響應 – Robert

+0

請參閱:http://stackoverflow.com/questions/114543/horizo​​ntally-center -a-div-in-a-div如果你不想固定寬度,你可以使用'display:table'和'margin:0 auto'(或者你可以指定你的每個斷點的寬度網站) –

0

使用此片段:

ul{ 
 
    list-style: none; 
 
} 
 
.sp-methods{ 
 
    margin:0 auto; 
 
    width:50%; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<dl class="sp-methods"> 
 
\t <dt>Free Shipping</dt> 
 
\t <dd> 
 
\t \t <ul> 
 
\t \t \t <li> 
 
\t \t \t \t <div class="radio"> 
 
\t \t \t \t \t <label for="s_method_freeshipping_freeshipping"> 
 
\t \t \t \t \t <input class="radio" type="radio" checked="checked" value="freeshipping_freeshipping" name="shipping_method">Free<span class="price">$0.00</span></label> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </dd> 
 
\t <dt>Choose Your Shipping Method</dt> 
 
\t <dd> 
 
\t \t <ul> 
 
\t \t \t <li> 
 
\t \t \t \t <div class="radio"> 
 
\t \t \t \t \t <label for="s_method_my_1"> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <div class="radio"> 
 
\t \t \t \t \t <label for="s_method_my_2"> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </dd> 
 
</dl>