文本左對齊和垂直中心div div

我有這個JS代碼，我用來創建一個新的div（我創建了幾個，動態）。我希望我的文本垂直居中並對齊div的左側。有什麼建議做什麼？這裏是我的代碼：文本左對齊和垂直中心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

另一件事。這段代碼將水平居中文本，它似乎傾向於div的頂部而不是中間。

來源

2012-03-09 mkyong

如果div的高度是恆定的（好像是70像素），比你可以用line-height: 70px;呈現垂直居中任何文本。

來源

2012-03-09 05:33:31

只是一個注意事項：當心！如果一行跨越2行，這會造成問題。僅在單行上下文中使用此技術。「white-space：nowrap」 - 可能是你的朋友。 – 2012-03-09 06:22:40

它是不可能垂直對齊div內的文本與使它表格單元格，或者你必須插入一個跨度內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>

來源

2012-03-09 05:30:33

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

來源

2012-03-09 06:15:24 Vrushank

文本左對齊和垂直中心div div

回答

相關問題