引导中的中心文本

我在引导程序中有以下html代码，我想将所有内容居中，但对齐左侧，我在此添加一张图片以更好地理解。引导中的中心文本

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

来源

2016-04-24 Robert

您的代码段已经看起来居中对齐。 –

但不是在左边，我想要居中，但在中心对齐左边 – Robert

好。那么只需使用：'margin：0 auto;' –

做这样的，在其中添加一个包装，<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>

来源

2016-04-24 08:25:26 LGSon

是完美的LGSon非常感谢你，你的代码工作就像一个魅力 – Robert

最简单的方法是给它一个固定的宽度，并使用margin: 0 auto。

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

来源

2016-04-24 08:20:06

谢谢，但我不能在那里固定宽度，是与bootstrap和响应 – Robert

请参阅：http://stackoverflow.com/questions/114543/horizontally-center -a-div-in-a-div如果你不想固定宽度，你可以使用'display：table'和'margin：0 auto'（或者你可以指定你的每个断点的宽度网站） –

使用此片段：

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>

来源

2016-04-24 08:26:16

引导中的中心文本

回答

相关问题