CSS3：平移X到中心元素水平

我想水平居中元素：jsfiddle CSS3：平移X到中心元素水平

<div id="parent"> 
    <div id="child"> 
</div>

在孩子我现在有下面的CSS这并不中心：

transform: translateX(50%);

不幸的是，50％来自#child而不是父母。有没有办法使用变换来居中这个元素（我知道我可以使用居中，例如'左'）？

这里是CSS

的全面上市

#parent { 
    width: 300px 
    height: 100px; 
    background-color: black; 
    border: 1px solid grey; 
} 
#child { 
    height: 100px; 
    width: 20px; 
    -webkit-transform: translateX(50%); 
    background-color:red; 
}

来源

2013-12-12 Jeanluca Scaljeri

你在#parent css中有什么？ – Hardy

你是缺少父的位置相对，位置绝对对孩子和左侧和顶部的值，以帮助抵消了孩子。

DEMO http://jsfiddle.net/nA355/6/

#parent { 
    width: 300px; 
    height: 100px; 
    background-color: black; 
    border: 1px solid grey; 
    position: relative; 
} 
#child { 
    position: absolute; 
    height: 100px; 
    width: 20px; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translateX(-50%) translatey(-50%); 
    -moz-transform: translateX(-50%) translatey(-50%); 
    transform: translateX(-50%) translatey(-50%); 
    background-color:red; 
}

来源

2013-12-12 08:58:25 2ne

在我的情况下，我想使用变换来移动#child。混合绝对位置和变换使其变得复杂。例如，给定你的解决方案，你会如何将小孩10px移动到左边？这就是为什么我在寻找没有绝对定位的解决方案。 –

margin-left：-10px; ？ – 2ne

-1

我使用这种技术来水平地对准的情况下的一些元素，其中“文本对齐：中心;”无法正常工作。

position:relative; 
left:50%; 
transform:translateX(-??em) /*or -??px or other unit of measure */

...“??”必须根据元素的宽度来调整。我知道这有点哈克，但似乎在我迄今尝试过的屏幕上工作。

在你的小提琴，应用这种技术，我得到：

#parent { 
    width: 300px 
    height: 100px; 
    background-color: black; 
    border: 1px solid grey; 
} 
#child { 
    position:relative; 
    height: 100px; 
    width: 20px; 
    left:50%; 
    transform: translateX(-10px); /*or transform: translateX(-50%);*/ 
    -webkit-transform: translateX(-10px);/*or -webkit-transform: translateX(-50%); */ 
    -ms-transform: translateX(-10px);/*or -ms-transform: translateX(-50%);*/ 
    background-color:red; 
}

这正好水平居中的孩子股利。

来源

2015-08-11 02:07:30 whitebeard

CSS3：平移X到中心元素水平

回答

相关问题