css - 記事タグをページの中央に移動しますか?

Question

必要な場所に収まるように、記事を中央に配置したい. しかし、私は中央に入れたくありません。左に約1インチ、上にほぼ同じにしたいのです。

次のコードをどうすればよいですか？

article{
    background:white;
    width:650px;
    height:325px;
    border-radius:7px solid;
    padding-left:10px;
    padding:right:10px;
    color:red;
    margin:auto;
    margin-bottom:40px;
}

Answer 1

わかりました、ここで試してみてください...これがあなたが要求しているものだと思います。基本的に、コンテナ div を使用してコンテンツを中央に配置し、内側の div を内側に配置して、中央の div に対してオフセットします。

Codepen スケッチはこちら: http://cdpn.io/lthnf

HTML

<article class='container'>
  <div class='inner'>Content</div>
</article>

CSS

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  background: #ccc;
  bottom: 0;
  height: 325px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 650px;
}

.inner {
  background: #efefef;
  position: relative;
  left: -20px;
  top: -20px;
}

Answer 2

position:relative要素に 追加し、プロパティleftとtopプロパティを使用して中心から移動できます。

article{
    background:black;
    width:650px;
    height:325px;
    border-radius:7px;
    padding: 0 10px;
    color:red;
    margin:auto;
    margin-bottom:40px;
    position: relative;
    top: 20px;
    left: 20px;
}

デモフィドル