アバター・名前・肩書き・フォローボタンを縦に積んだプロフィールカード。円形アバターと中央揃えの基本形です。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
円形アバターは border-radius: 50% の定番技です。中身はカード全体の text-align: center で中央に寄せ、アバターだけは margin: 0 auto でブロックごと中央配置します。実数のペア(投稿数など)は dl/dt/dd でマークアップすると、ラベルと値の関係が支援技術にも伝わります。
実際のアバター画像を使うときは img に object-fit: cover を指定すると、縦横比の違う画像でも円内に収まります。
プロフィールカードを作ってください。円形アバター・名前・肩書き・投稿数とフォロワー数(dlでマークアップ)・フォローボタンの縦積み構成で、中央揃えにしてください。