ボタンにまつわること（beforeでアイコン画像を入れる等）

たまに使うので、まとめておきます。

beforeでアイコン画像（空content、inline-block、背景画像、width、height）

背景画像にするとアイコンのサイズ調整がcssでできる。

.c-btn-favorite::before{    
content:'';    
display: inline-block;    
background-image: url(/image/common/other/fav_icon_star.png);    
width: 29.5px;    
height: 23.5px;   
background-size: contain;    
vertical-align: bottom;    
background-repeat: no-repeat;  
}

ボタンを中央寄せ（inline-block、margin-left、transform: translateX(-50%);）

text-align:center;やmargin:0 autoが効かない時とは？

flexを使えば簡単に中央寄せにできるのか？

.c-btn-favorite {    
 width: 264px;    
background-color: #fc68a7;    
box-shadow: 0 4px 0 0 #f93286;    
padding: 8px 0px;    
border: 0;    
border-radius: 5px;    
box-sizing: border-box;    
color: #fff;    
cursor: pointer;    
display: inline-block;    
line-height: 1.15;    
list-style: none;    
font-size: 1.6rem;    
text-decoration: none;    
text-align: center;    
margin: 10px 10px 10px 24px;    
margin-left: 50%;    
transform: translateX(-50%);
}