インライン ブロック要素 (特に Webkit ブラウザー) でテキストを垂直方向に中央揃えにしようとしています。<button> 要素がすぐに使用できることとほとんど同じです。
この質問Vertical align text in block elementのように、box-align を使用してみましたが、要素に明示的な幅を設定したくありません: コンテンツに合わせたい、つまり、表示したい: inline-ブロックタイプの振る舞い。
Firefox では、-moz-box は希望どおりに動作するように見えますが、Safari と Chrome では、-webkit-box を使用すると、div がコンテナーを水平方向に塗りつぶします。
【初心者なので画像載せれません】
ここでさまざまな設定の例をいじってください。
実際の <button> 要素で Webkit のインスペクターを見ると、デフォルトで display: inline-block になっていますが、display: -webkit-box に設定されているかのように -webkit-box-align に従います。<button> で明示的に display:inline-block と -webkit-box-align: end を設定したフィドルを参照してください。
追加の <div> をミックスに追加することで、必要な動作を得ることができるようですが、実際にはそれを行いたくありません。表示についても認識しています。垂直方向の中央揃えのためのテーブルセル手法。他の副作用があるため、これはここでは適切ではありません。
では、webkit の動作は正しいのでしょうか? <button> 要素は <div> にできないことをどのように行うのですか? <div> を <button> のように動作させる可能性のある、私が見つけていない内部 Webkit CSS プロパティはありますか? またはさらに良いことに、これを行うクロスブラウザの方法はありますか?