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到中心元素水平

回答

相關問題