CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Robert
Robert

Reputation: 812

Center text in bootstrap

I have the following html code in bootstrap and I want to center all things to center but aligned to the left, I add here a image to understand better.

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

Upvotes: 1

Views: 549

Answers (3)

Ani Menon
Ani Menon

Reputation: 28257

Use this snippet:

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

Upvotes: 0

Asons
Asons

Reputation: 87292

Do like this, where you add a wrapper, <div class="text-center">, set text-left to your <dl class="sp-methods text-left"> and add .sp-methods { display: inline-block; } to your 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>

Upvotes: 1

James Lawson
James Lawson

Reputation: 8628

The simplest way is to give it a fixed width and use margin: 0 auto.

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

Upvotes: 0

Related Questions