css3: translateX-center-element horizontal

Ich versuche, die Mitte horizontal ein element: jsfiddle

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

Auf das Kind, das ich haben nun das folgende css, die nicht center:

transform: translateX(50%);

Leider sind die 50% wird aus dem #Kind und nicht der Elternteil. Gibt es einen Weg zur Mitte dieses element die Verwendung von Transformationen (ich weiß, ich kann es verwenden, zum Beispiel 'Links')?

Hier ist die vollständige Liste der 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;
}
  • was haben Sie in der Einstellung #parent css?
InformationsquelleAutor Jeanluca Scaljeri | 2013-12-12
  1. 14

    Sie fehlten, eine position in Bezug auf Ihre Eltern, position absolute, die das Kind und die Werte left und top zu helfen, den offset Kind.

    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;
}
    • In meiner situation ich möchte, sich zu bewegen #Kind um Hilfe zu verwandeln. Mischen absolute position und verwandeln Sie macht es kompliziert. Zum Beispiel, angesichts Ihrer Lösung, wie würden Sie bewegen das Kind 10px nach Links ? Das ist, warum ich war auf der Suche nach einer Lösung ohne absolute Positionierung.
    • margin-left: -10px; ?
    InformationsquelleAutor 2ne
  2. -2

    Verwende ich diese Technik um horizontal ausrichten einige Elemente in Situationen, in denen "text-align:center;" funktioniert nicht richtig.

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

    ... "??" hat gezwickt werden, je nachdem, wie breit das element ist. Ich weiß, es ist ein bisschen hacky, aber scheint zu funktionieren auf den Bildschirmen, ich habe versucht es so weit.

    In Ihre Geige, mit der Anwendung dieser Technik, bekomme ich:

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

    welche genau Zentren der untergeordneten div-Element horizontal.

    InformationsquelleAutor whitebeard
Schreibe einen Kommentar