将文章标签移动到页面中心

Question

我希望文章居中，以便到达我想要的位置。但是我不想在中间，我希望它向左大约一英寸，顶部大约相同。

我应该如何处理以下代码？

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偏移

此处为代码笔草图：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;
}

演示小提琴