左右中央揃えに便利な関数calc

左右中央揃えに便利な関数calc

 calc関数はCSSで利用できる関数です。CSSのleft、topプロパティやmargin、paddingプロパティと併せて指定することで中央配置に使えます。
IE10以降、Edge、Chrome、FireFox等、主要なブラウザで問題なく利用できます。


 ~ leftプロパティにcalc関数を利用して左右中央揃えにする ~ 

 leftプロパティを利用するには該当要素をposition:relative、absolute、fixedいずれかに設定する必要があります。


  • 結果

  • HTML

  • CSS

  • calcで中央配置
  • /* HTMLの例 */
    
    		
    calcで中央配置

  • /* CSSの例 */
    
    .sample1 {
    	background: pink;
    	height:100px;
    }
    
    .sample1_child {
        position:relative;
    	background: skyblue;
    	left: calc(50% - 100px / 2);
    	width:100px;
    	height:100px;
    }
    	



 ~ marginプロパティにcalc関数を利用して左右中央揃えにする ~ 

 leftプロパティを利用する場合と違い、該当要素のposition値は関係ありません。


  • 結果

  • HTML

  • CSS

  • calcで中央配置
  • /* HTMLの例 */
    
    		
    calcで中央配置

  • /* CSSの例 */
    
    .sample2 {
    	background: pink;
    	height:100px;
    }
    
    .sample2_child {
    	background: skyblue;
    	margin:0 0 0 calc(50% - 100px / 2);
    	width:100px;
    	height:100px;
    }
    	




 Copyright IT SKILL MAP. All rights reserved.