0

次の HTML があるとします。

<div id="container">
    <div id="left">Left</div>
    <div id="centre">Centred</div>
</div>

およびCSS:

#left {
    float: left;
    text-align: left;
}

#centre {
    text-align: center;
}

固定幅を指定せずcentreに要素を水平方向に中央揃えするにはどうすればよいですか? 次の図は、目的の結果を示しています。

の

これまでのところ、次のように表示できます。

の

これは、私がこれまでに行ったことを示す jsFiddle です。

私は、幅を指定する必要のない汎用ソリューションを好みます。

4

2 に答える 2

1

左の div の幅がわかっている場合は、次のようにできます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

#left {
    float: left;
    width: 30px;
}

#centre {
    margin: 0 40px;
    text-align: center;
}

#left, #centre, #container {
    border: 1px solid #000;
}

#container {
    width: 175px;
    padding: 5px;
}

</style>

</head>
<body>

<div id="container">
    <div id="left">Left</div>
    <div id="centre">Centred</div>
</div>

</body>
</html>
于 2013-05-27T23:52:49.963 に答える