8

私はこのコードを持っています:

<div class="outer">
    <ul class="list">
        <li class="inner">
            <div class="line">information1</div>
            <div class="line">hyperlink1</div>
        </li>
        <li>
            <div class="line">information2</div>
            <div class="line">hyperlink2</div>
        </li>
        <li>
            <div class="line">information3</div>
            <div class="line">hyperlink3</div>
        </li>
        <li>
            <div class="line">information4</div>
            <div class="line">hyperlink4</div>
        </li>
    </ul>
    <input type="submit" id="send" value="send" class="button"/>
</div>

そしてCSS：

.outer
{
    display: table;
    border: 1px solid;
    padding: 5px;
}    
.list
{
    list-style: none;
    padding: 5px;
}    
.inner
{
    display: table-row;
    padding: 5px;
}    
.line
{
    display: table-cell;
    border: 1px solid;
    border-radius: 5px;
}    
.button
{
    top:50%; 
    left:50%;
}

出力は次のとおりです。

ここで、幅に関係なく、「外側」の div の中央にボタンを配置したいと考えています。

例: ボタンを中央に配置したい: this . div サイズが変更されるたびに css を変更する必要はありません。「外側」の div が動的であっても、ボタンは中央に配置する必要があります。

ありがとうございました。

4

5 に答える 5

18

これにより、探しているものがシンプルで簡潔な方法で実現されます。

.button {
    display:block;
    margin: 0 auto;
}
于 2013-03-19T10:30:34.407 に答える
4

ボタンに特定の幅を与える必要があり、その後、自動マージンを使用できます

.button {
  display: block;
  margin: 0 auto;
}

http://fiddle.jshell.net/CrHyd/

于 2013-03-19T10:31:12.870 に答える
1

これを行う方法は複数あります。私は次のようにパーセンテージを使用することを好みます。

input[type="submit"]{
    min-width:20%;
    max-width:20%;
    margin:0% 39% 0% 40%; //margin-right = 39% to stop errors
}

他の人はmargin:autoアプローチを好みますが、個人的にはこれがうまくいくとは思いませんでした。他の方法には使用floatsが含まれますが、一部のブラウザーでは他の要素が正しく配置されないため、このプロパティには同意しません。

デフォルト（静的）以外の位置タイプを指定していないため、上と左を使用するとエラーが発生します。

于 2013-03-19T10:30:39.840 に答える
0

これはうまくいくはずです

.outer {
display: inline-block;
text-align: center;
}

フィドル

于 2013-03-19T10:31:35.700 に答える
0

プロパティ.buttonを使用して、これに変更するだけです。margin(1行修正)

.button
{
    margin:0 auto;
}

これは、何が行われるかの例を示すためだけに.outer固定幅を作成したフィドルです。500pxmargin

デモ

于 2013-03-19T10:37:49.480 に答える