垂直居中标题文本 [英] vertically center header text
问题描述
我想增加一个jQuery移动应用程序的标题的大小。当我这样做，我需要标题为中心。我发现我可以添加一行像：
line-height：30px;
到css，但这只是一个很大的黑客。我假设必须有一个更好的方法来做。
<！DOCTYPE html>
< html>
< head>
< title>页标题< / title>
< link rel =stylesheethref =http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css/>
< script src =http://code.jquery.com/jquery-1.4.3.min.js>< / script>
< script src =http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js>< / script>
< style type =text / css><！ -
.ui-header {
height：50px;
}
- >
< / style>
< / head>
< body>
< div data-role =page>
< div data-role =header>
< h1>这需要垂直居中< / h1>
< / div>
< div data-role =content>
< p>页面内容在这里。< / p>
< / div>
< div data-role =footer>
< h4>页脚< / h4>
< / div>
< / div>
< / body>
< / html>
是通过使线高度与所述元件的高度相同。请注意，这只有在您有一行文本时才会工作。
line-height：30px;
height：30px;
在inline或table-cell元素中，可以使用 vertical-align ：middle 以实现相同的效果。
另请注意，强制 display：table-cell
在你的情况下，我建议使用line-height / height技术。
I am looking to increase the size of the header of a jquery mobile app. When I do that I need the title to be centred. I found that I can add a line like:
line-height: 30px;
to the css, but that is just far to much of a hack. I assume there must be a better way to do it.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<style type="text/css"><!--
.ui-header {
height: 50px;
}
-->
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>This Needs To Be Centred Vertically</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
The easiest way to vertically center text of a block element is by making the line-height the same as the height of said element. Note that this will only work if you have a single line of text.
line-height: 30px;
height: 30px;
On an inline or table-cell element, you could use vertical-align: middle to achieve the same effect.
Also note that forcing display: table-cell on an element will not work in IE6-7.
In your case, I would suggest going with the line-height/height technique.
这篇关于垂直居中标题文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
