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

<强> Demo fiddle

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

2 个答案: