0

display: inline-block を使用できないいくつかのフローティング div があります。これらの div の一部は jqxSwitchButtons であり、その inline-block を使用すると、これらのボタンの周りのすべてが台無しになるためです。

これは、 jqxSwitchButtonsであるいくつかの行にコメントを付けた JSFiddle の例で、これらの div を中央に配置したいと考えています。

JSFiddle からのコード:

<!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=iso-8859-1" />
</head>
<body>
    <center>
            <table style="padding:1px;margin:1px;color:#00417B;font-size:12px;border:2px solid #525252;border-collapse: collapse;background-color:white;width: 100%;" border=1>
            <tr><td>
            <div style="display: block; align:center; width: 100%; margin-left: auto; margin-right: auto; padding-right: auto; padding-left: auto; text-align: center;">

            <div style="float: left; margin-top: 5px; font-weight: bold; ">Element 1</div>
            <div><div style="float: left; margin-left: 5px; margin-right: 5px; margin-top: 2px; margin-bottom: 2px; border: 0.1em solid green; width: 10px; height: 21px;"><div id="element_1" style="float: left;"></div></div></div> <!-- jqxSwitchButton -->

            <div style="float: left; margin-top: 5px; font-weight: bold; ">Element 2</div>
            <div><div style="float: left; margin-left: 5px; margin-right: 5px; margin-top: 2px; margin-bottom: 2px; border: 0.1em solid green; width: 10px; height: 21px;"><div id="element_2" style="float: left;"></div></div></div> <!-- jqxSwitchButton -->

            <div style="float: left; margin-top: 5px; font-weight: bold; ">Element 3</div>
            <div><div style="float: left; margin-left: 5px; margin-right: 5px; margin-top: 2px; margin-bottom: 2px; border: 0.1em solid green; width: 10px; height: 21px;"><div id="element_3" style="float: left;"></div></div></div> <!-- jqxSwitchButton -->

            <div style="float: left; margin-left: 1px">|</div>

            <div style="float: left; margin-left: 2px"><input type="button" id="btnCompute" value="Compute" onClick="Compute()" style="margin-top: 4px"></div>

            <div style="float: left; margin-left: 1px">|</div>

            <div style="float: left; margin-top: 5px; margin-left: 2px; font-weight: bold; ">Auto-compute</div>
            <div><div style="float: left; margin-left: 5px; margin-right: 5px; margin-top: 2px; margin-bottom: 2px; border: 0.1em solid green; width: 10px; height: 21px;"><div id="recompute" style="float: left;"></div></div></div> <!-- jqxSwitchButton -->

            <div style="float: left; margin-top: 5px; margin-left: 2px; font-weight: bold; "><input type="checkbox" name="chkAutoRecompute" id="chkAutoRecompute" value="0" style="display: none" ></div>

            </div>

            </td></tr>

            </table>
    </center>
</body>
</html>

助言がありますか？

4

2 に答える 2

0

Cyborgx37 と mitchelltrout さん、こんにちは！最後に、メディアクエリに応じて適切に設定されたコンテナー div の固定幅を使用して解決したため、解像度ごとに異なる幅を設定して、すべてを 1 行に揃えることができました。でも、助けてくれてありがとう。チャオ、ルイジーノ

于 2013-02-20T08:33:47.673 に答える
0

CSS で物事を中央に配置する適切な方法は、margin-left: auto; です。margin-right:auto;. しかし、これらの div のマージンを既に変更しているため、減価償却済みの<center></center>HTML タグを使用することをお勧めします。何年も前に減価償却されましたが、最新のブラウザーでは引き続き機能します。ブラウザのいずれかが将来のバージョンでセンター タグを削除する予定があるかどうかはわかりません。

于 2013-02-07T16:15:39.920 に答える