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 回答は役に立ちません 間違った回答です。

13

0

0

给我你的怀抱

返事

全員に返信(13)

返信します 近い

黄舟2017-05-16 13:23:39 13棟

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

リーリー

いいねを押す +0

返信を追加 关闭回复

给我你的怀抱

返事

仅有的幸福2017-05-16 13:23:39 12棟

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

いいねを押す +0

返信を追加 关闭回复

给我你的怀抱

返事

Peter_Zhu2017-05-16 13:23:39 11棟

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

リーリー リーリー

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

いいねを押す +0

返信を追加 关闭回复

给我你的怀抱

返事

洪涛2017-05-16 13:23:39 10棟

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

いいねを押す +0

返信を追加 关闭回复

给我你的怀抱

返事

刘奇2017-05-16 13:23:39 9棟

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

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

リーリー

利点: 優れた互換性;

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

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

リーリー

長所: 互換性が良い

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

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

リーリー

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

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

絶対位置の使用

リーリー

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

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

最初の方法

リーリー

2番目の方法

リーリー

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

いいねを押す +0

返信を追加 关闭回复

给我你的怀抱

返事

过去多啦不再A梦2017-05-16 13:23:39 8棟

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

いいねを押す +0

返信を追加 关闭回复

给我你的怀抱

返事

Ty802017-05-16 13:23:39 7棟

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

}

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

}

いいねを押す +0

返信を追加 关闭回复

给我你的怀抱

返事

仅有的幸福2017-05-16 13:23:39 6棟

1

リーリー

2

リーリー

3

リーリー

4 用フレックス

いいねを押す +0

返信を追加 关闭回复

给我你的怀抱

返事

淡淡烟草味2017-05-16 13:23:39 5棟

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

いいねを押す +0

返信を追加 关闭回复

给我你的怀抱

返事

巴扎黑2017-05-16 13:23:39 4棟

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

いいねを押す +0

返信を追加 关闭回复

给我你的怀抱

返事

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