同じCssグリッド領域の画像とテキスト
aWildFruit
4x11グリッドがあり、同じ領域内でその横に画像とキャプションを配置しようとしています。現在、画像はテキストの左側ではなく、テキストの上に表示されています。
<div class="Time">
<figure class = "Time-icon">
<img src="/images/time.png" alt="time icon" width= "20%" height= "20%">
</figure>
<h2>Time</h2>
</div>
.time {
grid-area: 10 / 3 / 12 / 4;
align-items: center;
padding-left: 85px;
}
.time-icon{
float: left;
display: block;
}
アイコンをテキストとインラインで左にうまく配置するにはどうすればよいですか？
ジョージ
これでも使えると思いますcss。
.time {
display: flex;
justify-content: center;
align-items: center;
}
.time-icon {
margin: 0 8px 0 0;
width: 20%;
height: 20%;
}
.time-icon img {
width: 100%;
height: 100%;
}
html
<div class="time">
<figure class = "time-icon">
<img src="/images/time.png" alt="time icon">
</figure>
<h2>Time</h2>
</div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
- 前の投稿：予期しない '！' 'worker-loader！mapbox-gl / dist / mapbox-gl-csp-worker'で
- 次の投稿：スティッキーナビゲーションのScrollMagicレスポンシブ期間/エンドポイント？
関連記事
Related 関連記事
- 1
cssグリッド領域の外側に配置されたテキスト
- 2
cssグリッド：同じ列のテキストを揃えます
- 3
ベース画像の特定の領域をクリックすると、ポップアップ（同じウィンドウ）に画像が表示されます。
- 4
cssグリッドを使用して同じグリッド領域の2つの要素を正しくフォーマットする方法
- 5
ラベル、テキストボックス、テキスト領域を同じ行に並べて配置するためのcssを指定する方法
- 6
CSSとHTML：マウストラッキングでテーブルの領域をマークします
- 7
cssグリッド領域のボックスシャドウ
- 8
テキスト領域のトグルボタンjqueryでクリック
- 9
画像をドラッグしてテキスト領域に画像を表示する方法
- 10
CSSグリッドと複数の領域の指定
- 11
同じスタイルのテキスト領域を含める
- 12
2つのCSSグリッド領域に背景として画像タグを重ねる方法
- 13
どのグリッド領域のインラインテキストが流入するかを指定することは可能ですか？
- 14
グリッドテンプレート領域-表示の問題
- 15
ポップアップウィンドウのヘッダーテキストと同じ行のボタン内のCSS画像
- 16
入力テキスト領域でのキャレットのスタイリング
- 17
リストグループの同じ行にテキストと画像を揃える
- 18
CSSの同じ行に複数行のテキストと画像を表示する
- 19
WPFリストビューのグリッドビュー領域のマウスキャプチャ
- 20
画像上のCSSグリッドにテキストを配置します
- 21
リンクのヒット領域を増やすと、テキストの下線も増えます
- 22
コメントを入力するためのテキスト領域列を、フォーム内の他の列と同じ列位置に移動します
- 23
CSSGRID-グリッドテンプレート-空のセルと自動配置のある領域
- 24
クリックするとフォームのテキスト領域を削除します
- 25
Wordpressの画像とテキストのグリッチ
- 26
地理的領域を同じサイズのグリッドに分割し、各セルの左上と右下を返します
- 27
JTable：同じ列のテキストと画像
- 28
CSSグリッドレイアウト：IE11のグリッド領域をサポート
- 29
ExcelVBAマクロを使用して特定の領域のスクリーンショットをキャプチャして同じファイルに保存する
コメントを追加