Category Archives: CSS

センタリング

センタリングさせる要素がインライン要素の場合はハマりやすい。
ブロック要素に変更してからセンタリング。

[su_tabs][su_tab title=”HTML”]

// img要素 inline要素のためblockに変更する必要あり
<img src="<%= product.image_url %>" alt="product_image" height="185" width="300">

[/su_tab]

[su_tab title=”CSS”]

img{
  display: block; // ブロックに変更してあげる必要あり
  margin: 0 auto;
}

[/su_tab]
[/su_tabs]

displayプロパティ

■文字の装飾
※横幅が内部の文字要素と同じ長さに自動的に調整される。 (widthが設定されている場合はそちらを優先)
・inline
 余白なし

・inline-block
 余白あり

■文字に関する装飾処理はなし
・block
※デフォルト値

クリアフィックス

[su_tabs]

[su_tab title=”HTML”]

<div class="box clearfix">

	<div class="left_box">
      <h2>Followings</h2>
      <h3>21</h3>
  </div>

  <div class="right_box">
      <h2>Followers</h2>
      <h3>5</h3>
  </div>

</div>

[/su_tab]

[su_tab title=”CSS”]

.box{
  width: 100%;
  /*width:400px;*/
  margin: 0 auto;
}

.left_box{
  float: left;
  text-align: center;
  width: 50%;
  height: 100px;
  /*background-color: red;*/
}

.right_box{
  float: right;
  text-align: center;
  width: 50%;
  height: 100px;
  /*background-color: green;*/
}

.clearfix:after{
  content: "";
  clear: both;
  display: block;
}

[/su_tab]

[/su_tabs]