Question

我有这个用于创建新div的JS代码（我创建了几个动态代码）。我希望我的文本垂直居中并与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

另一件事。此代码将文本水平居中，它似乎倾向于div的顶部而不是中间。

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内的文本而不是制作表格单元格，或者你必须在div和amp;给它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>

将文本左对齐并垂直居中于div

3 个答案: