文本左对齐和垂直中心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

回答

相关问题