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

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

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;
}

演示小提琴