質問: ### 前提・実現したいこと ![![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/678a2c480cbf902b587531e6c3dbb1c3.jpeg)](e64a68542253b6183f01ffc5dc7a4a05.jpeg) このようなデザインを目標に、positionプロパティを使いアイコンを中央配置にしたいと思います。 ### 発生している問題・エラーメッセージ ``` エラーメッセージ ``` ### 該当のソースコード ``` ``` ``` .info { width: 280px; position: relative; } .info .icon { position: absolute; right: 0; left: 0; margin: 0 auto; } ``` ### 試したこと アイコンをimage画像に置き換えると、真ん中に配置されるのですが アイコンですと左上に固定される配置になってしまいます。 指定の方法が間違っているのでしょうか? ご回答いただけるとうれしいです。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答: ``` .info .icon { position: absolute; right: calc(50% - 8px); margin: 0 auto; } ``` calc(50%) → これで、要素の真ん中に来ます。 なぜ、-8をしているかというと、アイコンが16pxだった場合に真ん中に来てほしいので、半分の8pxをマイナスしています。 私は無理やりやってしまった感じしますが、他にもっと良い方法があるかもしれません。