ウェブフロントエンド
htmlチュートリアル
Firefox では水平方向と垂直方向の中央揃えができるのに、Chrome では中央揃えできないのはなぜですか? _html/css_WEB-ITnose
Firefox では水平方向と垂直方向の中央揃えができるのに、Chrome では中央揃えできないのはなぜですか? _html/css_WEB-ITnose
コードは次のとおりです。Firefox では画像を水平方向または垂直方向に中央揃えできますが、Chrome では垂直方向のみに中央揃えでき、水平方向には中央揃えできません。 。長い間取り組んでいますが、解決策が見つかりません。助けてください。
注: javascript:DrawImage(this, 300, 300) は、同じ比率で縮小および拡大する関数です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title><script src="lib/js.js" type="text/javascript"></script><style type="text/css">#a{ width: 300px; height: 300px; margin: 10px; display: table-cell; border: 1px solid red; text-align: center; vertical-align: middle; overflow: hidden;}#b{ width: 300px; height: 300px; padding: 2px; display: table-cell; border: 1px solid #DDDDDD; vertical-align: middle; text-align: center;}</style></head><body><div id="a" > <a href="#"><img src="1.jpg" onload="javascript:DrawImage(this, 300, 300)" /></a></div><div id="b"> <img src="1.jpg" onload="javascript:DrawImage(this, 300, 300);" /></div></body></html>ディスカッションへの返信 (解決策)
これを中央に配置する必要があります
js 関数に問題がある可能性があります。 。
テストしたところ、Chrome 25.0.1364.172 m では問題はありませんでした。CSS を使用して長さと幅を直接制御しました。
#a img ,#b img{width:200px;height:200px}js 関数に問題がある可能性があります。 。
テストしたところ、chrome 25.0.1364.172 m では問題はありませんでした。CSS を使用して長さと幅を直接制御するだけで、次のように機能するはずです。 js 関数に何か問題があります。 。
テストした結果、Chrome 25.0.1364.172 m では問題ありません。CSS を直接使用して長さと幅を制御します
#a img ,#b img{width:200px;height:200px}この js 関数は CSS スタイルを制御しません。
これが js 関数によって引き起こされているかどうかをテストするには、js 関数を削除して、中央に配置できるかどうかを確認してください。
さらに、関数は幅と高さを変更していますが、実際には CSS スタイルを制御していないと言いました。 。 。
これが js 関数によって引き起こされているかどうかをテストするには、js 関数を削除して、中央に配置できるかどうかを確認してください。
テストした結果、問題はこの関数にあることがわかりました。ただし、この関数は画像の高さと幅を変更するだけで、画像を水平方向に中央揃えにすることはできません。機能を変更せずにこの関数を変更するにはどうすればよいでしょうか?ありがとう！
ImgD.style.display = "table-cell";
最後のものを削除してみてください。
//图片按比例缩放var flag=false;function DrawImage(ImgD, w, h){var image=new Image();var iwidth = w; //定义允许图片宽度，当宽度大于这个值时等比例缩小var iheight = h; //定义允许图片高度，当宽度大于这个值时等比例缩小image.src=ImgD.src;if(image.width>0 && image.height>0){ //假如图片长宽都不为零flag=true; if(image.height/image.width>= iheight/iwidth){ //通过正弦值判断图片缩放后是否偏高 if(image.height>iheight){ //如果图片比设定的要高 ImgD.height=iheight; ImgD.width=(image.width*iheight)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt=image.width+"×"+image.height; } else{ //如果图片比例 小于 设定的比例 if(image.width>iwidth){ ImgD.width=iwidth; ImgD.height=(image.height*iwidth)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt=image.width+"×"+image.height; }} ImgD.style.display = "table-cell";}ImgD.style.display = "table-cell"; これ以上はありません
ImgD.style.display = "table-cell"; 最後のものを削除してみてください。
以上です、ありがとうございます！
しかし、なぜ表のセル内の表のセルを水平方向に中央揃えにできないのかを聞きたいのですが。
私の問題は解決しました、皆さんありがとう！
これがよくわかりません
ラベル自体に表示が使われていて、表の td と同じスタイルになっていると考えることができます。 通常、td は左に表示されるか、左に表示されるかです。テーブルの左境界、または前の兄弟 td。したがって、ここでテーブルセルを設定すると、img が左側に表示されます。
簡単な例を挙げることができます:
#a img ,#b img{width:200px;height:200px}ここでは、内側の div が中央に表示されます。
中にdisplay:tabel-cellを追加すると、左側に表示されるので試してみてください。 。 。
この属性はあまり使用されていないため、この状況の最も根本的な理由ではない可能性があります。 。 。
このトピックに関する記事があるかどうかを検索して確認できます~~
あなたは利点を間違って理解しています。 。 。
表示属性はそれ自体にのみ影響し、子孫には継承されません
自分の表示がどのように設定されていても、その子孫の表示モードには影響しません。
つまり、ここにある理由は、img が display=table-cell を設定しているからであり、親要素の display=table-cell の設定とは何の関係もありません。
あなたは利点を間違って理解しています。 。 。
自分の表示がどのように設定されていても、その子孫の表示モードには影響しません。
つまり、ここにある理由は、img が display=table-cell を設定しているからであり、親要素の display=table-cell の設定とは何の関係もありません。
ただし、img が table-cell を設定してから text-align: center; を設定すると機能しません。
http://www.w3school.com.cn/css/pr_text_text-align.asp
text-align一般是用于处理文字的（后代会继承该属性），并且，这个是对子元素设置的效果，说是对子元素，其实也包括该元素包含的文字，但有一点是肯定，它对它本身是没有影响的。而display正好相反，display只对设置的元素本身有影响，并且后代不会继承。
一般情况下，text-align：center不会让子标签中的块级元素显示为居中的，比如，行内元素会被居中处理。这里img是属于行内元素的表现类型，所以才会居中。
display中，只有“inline”和“inline-***”开头的属性是属于行内元素的，而table开头的属性，都是被解析成块级元素的。
好像说的差不多了。。
给你个例子，还是在上面例子的基础上修改的。
<div style = "border:1px solid #aaa;width:500px;height:400px;text-align:center;"> <div style = "width:300px;height:300px;background:#eee;"> <img src = "#" style = "width:100px;height:100px;"></img> <img src = "#" style = "width:100px;height:100px;display:table-cell;"></img> </div></div>
你在浏览器调试工具中可以查看每个标签的CSS样式，应该可以看到：
1：最外层的div,设置了text-align，会被所有的子元素继承了，但是它的子元素中，块级元素div，并没有居中。
2：第二层的div，同样继承了text-align，它的子元素中，有两个img标签，第一个img没有设置display属性，那么其默认属性就是行内元素，这个img居中了；第二个img设置了table-cell属性，被当做了块级元素，那么这个img的前后，就会有换行符，所以，这个元素并没有能和第一个img并排显示，而是另起一行显示。并且没有居中。
这样应该可以大概明白了吧？
http://www.w3school.com.cn/css/pr_text_text-align.asp
text-align一般是用于处理文字的（后代会继承该属性），并且，这个是对子元素设置的效果，说是对子元素，其实也包括该元素包含的文字，但有一点是肯定，它对它本身是没有影响的。而display正好相反，display只对设置的元素本身有影响，并且后代不会继承。
一般情况下，text-align：center不会让子标签中的块级元素显示为居中的，比如，行内元素会被居中处理。这里img是属于行内元素的表现类型，所以才会居中。
display中，只有“inline”和“inline-***”开头的属性是属于行内元素的，而table开头的属性，都是被解析成块级元素的。
好像说的差不多了。。
给你个例子，还是在上面例子的基础上修改的。
<div style = "border:1px solid #aaa;width:500px;height:400px;text-align:center;"> <div style = "width:300px;height:300px;background:#eee;"> <img src = "#" style = "width:100px;height:100px;"></img> <img src = "#" style = "width:100px;height:100px;display:table-cell;"></img> </div></div>
你在浏览器调试工具中可以查看每个标签的CSS样式，应该可以看到：
1：最外层的div,设置了text-align，会被所有的子元素继承了，但是它的子元素中，块级元素div，并没有居中。
2：第二层的div，同样继承了text-align，它的子元素中，有两个img标签，第一个img没有设置display属性，那么其默认属性就是行内元素，这个img居中了；第二个img设置了table-cell属性，被当做了块级元素，那么这个img的前后，就会有换行符，所以，这个元素并没有能和第一个img并排显示，而是另起一行显示。并且没有居中。
这样应该可以大概明白了吧？
非常感谢，谢谢你耐心的解答！
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7564
15
1386
52
87
11
28
101
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
