web-dev-qa-db-ja.com

DIVをインデントする方法？

マージンを0 autoに設定して、divを中央揃えにしました。次に、左マージンを中央から50ピクセルだけインデントします。ただし、これを行おうとすると、divがコンテナーの左側に揃えられ、中央揃えが失われます。 marginプロパティの左のフィールドをオーバーライドするためだと思います。誰かがこれを達成する方法を知っていますか？明確にするために、コンテナの中心から50ピクセル追加してインデントしたいと思います。

csshtmlindentation
15
John Smith

別のdivでラップします。外側のdiv margin: 0 auto;と内側のdiv margin-left: 50px

26
mpen
<html>
<head>
    <title>Test</title>
    <style>
        #outer {
            margin: 0 auto; /*center*/
            width:200px;
            background-color:red; /*just to display the example*/
        }

        #inner {
            /*move the whole container 50px to the left side*/
            margin-left:-50px; 
            margin-right:50px;
            /*or move the whole container 50px to the right side*/
            /*
            margin-left:50px; 
            margin-right:-50px;
            */
        }
    </style>
</head>
<body>
<div id="outer">
    <div id="inner">
        This is the result!
    </div>
</div>
</body>
</html>
7
Daniel Kutik

試す

padding-left: 50px;

それでも不十分な場合は、パディングを維持し、大きなdiv内に別のdivを追加します。

3
Alin Purcaru

Divの周りに別のdivをラップします。次に、新しいdivを中央揃えにし、元のdivを左マージンまたはパディング左にします。

0
Alistair Laing