ホームページ >ウェブフロントエンド >htmlチュートリアル >Firefox では水平方向と垂直方向の中央揃えができるのに、Chrome では中央揃えできないのはなぜですか? _html/css_WEB-ITnose
Firefox では水平方向と垂直方向の中央揃えができるのに、Chrome では中央揃えできないのはなぜですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:26:151455ブラウズ
コードは次のとおりです。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并排显示，而是另起一行显示。并且没有居中。
这样应该可以大概明白了吧？
非常感谢，谢谢你耐心的解答！