ここで 2 つの別々の質問をしていることは認識していますが、HTML と CSS の経験が浅いため、これらは関連していると感じています。少なくとも、1 つの質問をする方法と、得られる回答が他の質問と互換性があることを確認する方法について確信が持てません。
だから、ここに行きます：
私は、さまざまなウィンドウ サイズで見栄えがする必要がある小さな電卓を作成しています。ウィンドウのサイズに応じてさまざまなグループを移動しながら、すべてをまとめておく必要があるボタンのグループがいくつかあります。以下は「良い振る舞い」のスクリーンショットです。
内容はヘッダーと一緒で、変な空白はありません。
次に、次の動作を取得します。ウィンドウの幅を少し変更すると、一部のマテリアルが下に移動しますが、div 全体ではなく、ヘッダーはそのままです。
ヘッダーをコンテンツに追従させるにはどうすればよいですか?
最後に、ウィンドウの幅がさらに小さくなると、ヘッダーも下に移動します。
この動作は問題ありませんが、上部の残りのコンテンツが余分なスペースを利用して水平方向に中央に配置されるようにしたいと思います。方法はありますか？CSS を使用して <div> を水平方向に簡単に中央揃えするにはどうすればよいですか?などの質問を見てきました。、しかし、それらはすべて、中央に配置したい要素の幅を増やすことを伴うようであり、スクリーンショット＃1の動作を壊します.
その例を次に示します。
#1 に影響を与えずにスクリーンショット #2 と #3 を修正するにはどうすればよいですか?
もちろん、フィドルも作成しましたが、スクリーンショットがポイントをより良くすると思いました：
それは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<style>
.incbut,.decbut,.rollButton{
background-color:#FF961F;
}
.regular-checkbox{
border-color:#FF961F;
}
body {
background-color:#FCB41B;
color:#753B08;
}
.modifiers{
text-align:left;
min-width:8em;
}
.center{
margin-left:auto;
margin-right:auto;
}
.inputField {
max-width:2em;
border:1px #bababa solid;
vertical-align:middle;
text-align:center;
}
.incbut,.decbut {
border: 1px transparent solid;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
padding: 4px 10px;
position: relative;
width: 2.5em;
}
.rollButton{
border: 1px transparent solid;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
padding: 4px 10px;
position: relative;#FF0000
}
button:active{
background-color:#FF0000;
}
.fieldCol{
float:left;
text-align:center;
max-width=45%;
height:9em;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.incbut,.inputField, .decbut{
min-height:2em;
margin-right:0.5em;
margin-bottom:0.3em;
}
h2{
margin:0.1em;
font-weight:500;
}
h2,button, input{
font-family:inherit;
}
.outputField{
padding:2px;
margin:3px;
border:1px #753B08 solid;
width=2em;
line-height:1.7em;
white-space:nowrap;
}
label {
display: inline;
}
.checkBoxLabel{
margin-left:5px;
font-size:90%;
}
.regular-checkbox {
display: none;
}
.regular-checkbox + label {
border: 3px solid #FF961F;
padding: 9px;
background-color: #FFFFFF;
display: inline-block;
position: relative;
vertical-align:middle;
margin: .1em;
}
.regular-checkbox:checked + label {
border: 3px solid #FF961F;
}
.regular-checkbox:checked + label:after {
content: '\2716';
font-size: 1em;
position: absolute;
top: 0px;
left: 10%;
color: #753B08;
font-weight: 600;
}
.checkboxbox2{
width:8em;
float:left;
}
.colContainer{
text-alignment:center;
}
div.centre{
text-align: left;
width: 17em;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body style="text-align:center;font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;" class="center">
<!--
<div class="colContainer">
<div class="centre">
-->
<section id="bal_attacker" class="fieldCol">
<h2>Attacker:</h2>
<label for="bal_BS1">BS:</label> <br>
<button type="button" id="bal_BS1inc" class="incbut"> + </button>
<input type="number" id="bal_BS1" value="1" class="inputField">
<button type="button" id="bal_BS1dec" class="decbut"> - </button> <br>
<label for="bal_S">S:</label> <br>
<button type="button" id="bal_Sinc" class="incbut"> + </button>
<input type="number" id="bal_S" value="1" class="inputField"/>
<button type="button" id="bal_Sdec" class="decbut"> - </button>
</section>
<section id="bal_defender" class="fieldCol" >
<h2>Defender:</h2>
<label for="bal_T">T:</label> <br>
<button type="button" id="bal_Tinc" class="incbut"> + </button>
<input type="number" id="bal_T" value="1" class="inputField">
<button type="button" id="bal_Tdec" class="decbut"> - </button> <br>
</section>
<!--
</div>
</div>
-->
<div>
<section title="bal_Modifiers" class="modifiers">
<h2 style="text-align:center;">Modifiers:</h2><br>
<span class="checkboxbox2">
<input type="checkbox" id="bal_harmConv" class="regular-checkbox" /><label for="bal_harmConv"></label>
<label for="bal_harmConv" class="checkBoxLabel">Harm. Conv.</label>
</span>
<span class="checkboxbox2">
<input type="checkbox" id="bal_rrToHit" class="regular-checkbox" /><label for="bal_rrToHit"></label>
<label for="bal_rrToHit" class="checkBoxLabel">R.r. to hit</label>
</span>
<span class="checkboxbox2">
<input type="checkbox" id="bal_rrToW" class="regular-checkbox" /><label for="bal_rrToW"></label>
<label for="bal_rrToW" class="checkBoxLabel">R.r. to wound</label>
</span>
<div style="clear: both;"></div>
</section>
<div style="clear: both;"></div>
</body>
</html>
これが最小限の実用的な例ではないことをお詫びします-しばらくの間、さらに削減しようと試みてきましたが、試してみると何かが壊れているようです.