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

我想要的文章，以获得在那里我希望它为中心。但是我不想在中间，我想要它左边一英寸左右，并且大约与顶端相同。将文章标签移动到页面中心？

我应该怎样处理下面的代码？

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

来源

2013-08-19 stacked ontop

你说的 '一英寸' 的意思。 – kunalbhat

大小，让我们说大约20px –

所以你有效地希望它居中，但是然后偏移左边和顶部约40px; – kunalbhat

好的，在这里给出一个镜头......我想这是你要求的。基本上，我正在使用一个容器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; 
}

来源

2013-08-19 22:25:55 kunalbhat

您可以添加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

来源

2013-08-19 22:28:33

通过他对我上面评论的回答来判断，我认为他希望它居中然后偏移，而不是从顶部定位一个固定的距离。 – kunalbhat

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

回答

相关问题