Выровнять текст по левому краю и центрировать по вертикали в div

Question

У меня есть этот JS-код, который я использую для создания нового div (я создаю несколько динамически). Я хочу, чтобы мой текст располагался по центру по вертикали и выровнялся по левой стороне div. Любые предложения о том, что делать? Вот мой код:

        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

Еще одна вещь. Этот код центрирует текст по горизонтали, и кажется, что он тяготеет к вершине элемента, а не к середине.

Answer 1

Если высота div постоянна (кажется, что она составляет 70px), тогда вы можете использовать line-height: 70px; для визуализации любого текста вертикально по центру.

Answer 2

<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>

Установите margin-top:-yy, где yy - половина высоты дочернего контейнера для смещения элемента вверх.

Источник: http://www.vanseodesign.com/css/vertical-centering/

Answer 3

Невозможно выровнять текст по вертикали внутри div без создания ячейки таблицы, или вам нужно вставить span внутри div и задать ему 50% высоты.

Проверьте ниже код.

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>