javascript - 以下の例に示すように、img 要素を div 内で中央に配置する方法

Question

HTMLコード

リーリー

希望する効果の例画像

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

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

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

• 4月20日の質問
• 2 コメント
• 回答を依頼する
• 編集
• もっと
  • レポート
  • 閉じる

コメントを送信する

× コメントは部分的な Markdown 構文をサポートします: **bold**_italic_[link](http://example.com)> 引用`code`- リスト。
同時に、あなたが@したユーザーも通知を受け取ります

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

13 件の回答

回答は役に立ち、参考になります 3 回答は役に立ちません 間違った回答です。

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

リーリー

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

翔さん227の評判

コメントを送信する

× コメントは部分的な Markdown 構文をサポートします: **bold**_italic_[link](http://example.com)> 引用`code`- リスト。
同時に、あなたが@したユーザーも通知を受け取ります

回答は役に立ち、参考になります 1 回答は役に立ちません 間違った回答です。

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

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

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

コメントを送信する

× コメントは部分的な Markdown 構文をサポートします: **bold**_italic_[link](http://example.com)> 引用`code`- リスト。
同時に、あなたが@したユーザーも通知を受け取ります

回答は役に立ち、参考になります 1 回答は役に立ちません 間違った回答です。

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

リーリー リーリー

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

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

toBeTheLight4.9k 評判

コメントを送信する

× コメントは部分的な Markdown 構文をサポートします: **bold**_italic_[link](http://example.com)> 引用`code`- リスト。
同時に、あなたが@したユーザーも通知を受け取ります

回答は役に立ち、参考になります 1 回答は役に立ちません 間違った回答です。

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

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

Hugangqiang117 評判

コメントを送信する

× コメントは部分的な Markdown 構文をサポートします: **bold**_italic_[link](http://example.com)> 引用`code`- リスト。
同時に、あなたが@したユーザーも通知を受け取ります

回答は役に立ち、参考になります 1 回答は役に立ちません 間違った回答です。

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

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

リーリー

利点: 優れた互換性;

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

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

リーリー

長所: 互換性が良い

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

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

リーリー

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

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

絶対位置の使用

リーリー

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

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

最初の方法

リーリー

2番目の方法

リーリー

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

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

ヨギ27の評判

コメントを送信する

× コメントは部分的な Markdown 構文をサポートします: **bold**_italic_[link](http://example.com)> 引用`code`- リスト。
同時に、あなたが@したユーザーも通知を受け取ります

回答は役に立ち、参考になります 0 回答は役に立ちません 間違った回答です。

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

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

Jessica_loli16 評判

コメントを送信する

× コメントは部分的な Markdown 構文をサポートします: **bold**_italic_[link](http://example.com)> 引用`code`- リスト。
同時に、あなたが@したユーザーも通知を受け取ります

回答は役に立ち、参考になります 0 回答は役に立ちません 間違った回答です。

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

}

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

}

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

ピエロズー11の評判

コメントを送信する

× コメントは部分的な Markdown 構文をサポートします: **bold**_italic_[link](http://example.com)> 引用`code`- リスト。
同時に、あなたが@したユーザーも通知を受け取ります

回答は役に立ち、参考になります 0 回答は役に立ちません 間違った回答です。

1

リーリー

2

リーリー

3

リーリー

4 フレックスを使用する

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

風の一匹狼227 評判

コメントを送信する

× コメントは部分的な Markdown 構文をサポートします: **bold**_italic_[link](http://example.com)> 引用`code`- リスト。
同時に、あなたが@したユーザーも通知を受け取ります

回答は役に立ち、参考になります 0 回答は役に立ちません 間違った回答です。

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

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

藤西22の評判

コメントを送信する

× コメントは部分的な Markdown 構文をサポートします: **bold**_italic_[link](http://example.com)> 引用`code`- リスト。
同時に、あなたが@したユーザーも通知を受け取ります

回答は役に立ち、参考になります 0 回答は役に立ちません 間違った回答です。

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

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

CRIMX865の評判

コメントを送信する

× コメントは部分的な Markdown 構文をサポートします: **bold**_italic_[link](http://example.com)> 引用`code`- リスト。
同時に、あなたが@したユーザーも通知を受け取ります

回答は役に立ち、参考になります 0 回答は役に立ちません 間違った回答です。

给我你的怀抱2713日前1700

Answer 1

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

リーリー

Answer 2

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

Answer 3

もう一枚重ねて包みます。

リーリー リーリー

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

Answer 4

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

Answer 5

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

inline-block と text-align を使用して実現

リーリー

利点: 優れた互換性;

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

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

リーリー

長所: 互換性が良い

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

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

リーリー

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

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

絶対位置の使用

リーリー

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

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

最初の方法

リーリー

2番目の方法

リーリー

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

Answer 6

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

Answer 7

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

}

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

}

Answer 8

1

リーリー

2

リーリー

3

リーリー

4 用フレックス

Answer 9

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

Answer 10

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