中央揃え

  • 8
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

Bootstrapのブロック中央揃え

    //中央よせ
    <div class="center-block">
      <div>ブロックの中央よせ</div>
    </div>

CSSの中央揃え(divなどのブロック要素)

<div class="main">  
    <div>  
    <h2>ブロックレベル要素をセンタリング</h2>  
    <p>ブロックレベル要素</p>  
    </div>  
</div> 
.main {  
    width: 100%;  
    border: 1px solid #000;  
}  
.main div   {  
    width: 80%;  
    border: 1px solid #FF0000;  
    margin: 0 auto;  
}

CSSの中央揃え(テキストなどのインライン要素)

h1{
  text-align: center;
}

inputタグの中央揃え

<div class="text-center">
  <input class="btn btn-primary" id="send" name="commit" type="submit" value="送信">
</div>

btn-group(Bootstrap)の中央揃え

      <div style="text-align:center;">
        <div class="btn-group"  role="group">
          <%= link_to 'Show', sentence, class: "btn btn-primary" %>
          <%= link_to 'Edit', edit_sentence_path(sentence), class: "btn btn-success" %>
          <%= link_to 'Destroy', sentence, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-danger" %>
        </div>
      </div>

参考

http://www.css-lecture.com/log/css-beginner/026.html
http://creatorclip.info/2014/05/css-layout-center/