LoginSignup
20
26

More than 5 years have passed since last update.

中央揃え

Posted at

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/

20
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
26