javascript - 以下の例に示すように、img 要素を div 内で中央に配置する方法
给我你的怀抱
给我你的怀抱 2017-05-16 13:21:39
0
13
1835

HTMLコード

リーリー

希望する効果の例画像

赤い部分はp、緑の部分はimgです

つまり、imgの方が幅が広いということです

imgの幅が固定されていないため、margin-leftを固定しても解決できません

  • 4月20日の質問
  • 2 コメント
  • 回答を依頼する
  • 編集

デフォルトの並べ替え 時間の並べ替え

13 件の回答

3

imgタグを使う代わりにpにbackground-imageを追加する方法もあります

リーリー

  • 4月20日に回答
  • コメント
  • 編集

翔さん227の評判

1

画像の配置 marginleft:-(width/2) img の幅は固定ではないので、js で取得して動的に marginleft を設定できます

  • 4月20日に回答
  • コメント
  • 編集

世界を冷めた目で見てください177評判

1

別のレイヤーを包みます。

リーリー リーリー

wrapper2的宽度是img宽度。imgmargin-left就等于自身宽的一半,相当于left:-50%*width

  • 4月20日に回答 ・4月20日更新
  • 2 コメント
  • 編集

toBeTheLight4.9k 評判

1

img はインラインブロック要素であり、親レベルで直接テキストを配置できます: center;

  • 5月3日に回答しました
  • コメント
  • 編集

Hugangqiang117 評判

1

実際には、水平方向のセンタリングの効果を実現したいと考えています。水平方向のセンタリングを実現するための 4 つの方法を示します (注: 以下の各例では、子要素の位置合わせ操作が実装されており、子要素の親コンテナは親要素)

inline-block と text-align を使用して実装します

リーリー

利点: 優れた互換性;

欠点: 子要素と親要素を同時に設定する必要がある

達成するには margin:0 auto を使用してください

リーリー

長所: 互換性が良い

短所: 幅を指定する必要がある

テーブルを使用して実装する

リーリー

利点: 自分で設定するだけで済みます

欠点: IE6と7は構造を調整する必要があります

絶対位置の使用

リーリー

短所: 互換性が低く、IE9 以降で利用可能

実用的なフレックスレイアウトの実装

最初の方法

リーリー

2番目の方法

リーリー

短所: 互換性が悪く、大面積レイアウトを実行すると効率に影響する可能性があります

  • 5月5日に回答
  • コメント
  • 編集

ヨギ27の評判

0

img.onload 時に p を外側にラップすると、js が幅を計算して外側の層に割り当てます。外側のコンテンツを中央に配置します

  • 4月21日に回答しました
  • コメント
  • 編集

Jessica_loli16 評判

0

まず p にposition:relative;を与えてから、imgに{
を与えます リーリー

}

c3 と互換性がない場合は、img{
を与えることができます リーリー

}

  • 4月21日に回答しました
  • コメント
  • 編集

ピエロズー11の評判

0

1

リーリー

2

リーリー

3

リーリー

4 フレックスを使用する

  • 4月21日に回答しました ・4月21日更新
  • コメント
  • 編集

風の一匹狼227 評判

0

画像のサイズを制限するために、外側にpのレイヤーを1つ、内側にpのレイヤーを1つ配置します

  • 5月3日に回答しました
  • コメント
  • 編集

藤西22の評判

0

互換性の問題を考慮しない場合は、ご覧ください object-fit

  • 5月3日に回答しました
  • コメント
  • 編集

CRIMX865の評判

0

给我你的怀抱
给我你的怀抱

全員に返信(13)
左手右手慢动作

親要素にdisplay: table-cellを与えてから、より一般的なtext-alignとvertical-alignを設定します

いいねを押す +0
大家讲道理

CSS:

リーリー

html:

リーリー
いいねを押す +0
洪涛

位置+変形

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート