Center Text im Bootstrap

Ich habe den folgenden HTML-Code im Bootstrap und ich möchte alle Dinge zu zentrieren, aber nach links ausgerichtet, füge ich hier ein Bild, um besser zu verstehen.Center Text im Bootstrap

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

Quelle

2016-04-24 Robert

Ihr Snippet sieht bereits zentriert aus. –

aber nicht in der linken, möchte ich zentriert werden, aber nach links in der Mitte ausgerichtet – Robert

ok. dann benutze einfach: 'margin: 0 auto;' –

wie dies tun, in dem Sie einen Wrapper hinzufügen, <div class="text-center">, setzen text-left auf Ihre <dl class="sp-methods text-left"> und .sp-methods { display: inline-block; } zu Ihrem 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>

Quelle

2016-04-24 08:25:26 LGSon

Ist perfekt LGSon Vielen Dank, Ihr Code funktioniert wie ein Charme – Robert

Der einfachste Weg ist es eine feste Breite zu geben und margin: 0 auto zu verwenden.

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

Quelle

2016-04-24 08:20:06

danke aber ich kann dort keine feste breite haben, ist mit bootstrap und reagiert – Robert

siehe: http://stackoverflow.com/questions/114543/horizontal-center -a-div-in-a-div können Sie 'display: table' und' margin: 0 auto' verwenden, wenn Sie keine feste Breite haben möchten (oder alternativ können Sie die Breite an jedem Haltepunkt Ihres bestimmen Website) –

Verwenden Sie dieses Snippet hinzu:

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>

Quelle

2016-04-24 08:26:16

Center Text im Bootstrap

Antwort

Verwandte Themen