Ausrichten von Text nach Links und Vertikal Zentrieren im div

Habe ich diese JS-code, den ich verwenden, um erstellen ein neues div an (ich mehrere, dynamisch). Ich möchte meinen text in die vertikal zentriert und ausgerichtet auf der linken Seite der div. Irgendwelche Vorschläge, was zu tun ist? Hier ist mein code:

        var leftDiv = document.createElement("div"); //Create left div
        leftDiv.id = "left"; //Assign div id
        leftDiv.setAttribute("style", "float:left;width:70%;vertical-align:middle; height:26px;"); //Set div attributes
        leftDiv.style.background = "#FFFFFF";
        leftDiv.style.height = 70; 
        user_name = document.createTextNode(fullName + ' '); //Set user name

Eine andere Sache. Dieser code zentriert den text horizontal und es scheint zu gravitieren, um die Spitze der div-statt in der Mitte.

InformationsquelleAutor mkyong | 2012-03-09

  1. 2

    Wenn die Höhe des div konstant ist (wie es scheint, ist 70px) als Sie verwenden können line-height: 70px; zu erbringen beliebigen text vertikal zentriert.

    nur ein Hinweis : Vorsicht! wenn span line in 2 line dies problem erstellen. Verwenden Sie diese Technik nur auf eine einzige Zeile Kontexten. "white-space:nowrap" - Kann dein Freund sein.

    InformationsquelleAutor Ekin Koc

  2. 1
    <style type="text/css">
   #myoutercontainer { position:relative }
   #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>

...
...

<div id="myoutercontainer">
   <div id="myinnercontainer">
      <p>Hey look! I'm vertically centered!</p>
      <p>How sweet is this?!</p>
   </div>
</div>

    Set margin-top:-yy wo JJ ist die Hälfte der Höhe der Kind-container, um den offset der Position auf.

    Quelle : http://www.vanseodesign.com/css/vertical-centering/

    InformationsquelleAutor Vrushank

  3. 0

    Ist es nicht möglich, die vertikale Ausrichtung von text innerhalb div mit heraus, so dass es Tabellenzelle, oder Sie legen einen span im inneren div & geben Sie 50% der Höhe.

    Check code unten.

    http://jsbin.com/agekuq/edit#preview

      <div
    id="left"
    style="background:red;
           display:table-cell;
           width:150px;
           height:150px;
           vertical-align:middle;"
  > My full name</div>

    InformationsquelleAutor Praveen Vijayan

Schreibe einen Kommentar