如何使文本在HTML页面中垂直和水平居中 [英] How to make text vertically and horizontally center in an HTML page
问题描述
我有一些Java，C，数据库，网络等的经验。但与Html相关的任何东西我是一个begginer。唯一要找的是在页面中间的两个单词（本页将只有这两个字）。
I have some experience with Java , C , databases , networking etc..But anything related with Html I am a begginer.The only thing that I am looking for is to center two words in the middle of the page(This page will have only those two words).
WORD1
WORDWORDWORDWORD2
我已经尝试过像KompoZer这样的WYSIWYG软件，但是当我查看源代码时，它生成了一个可怕的静态代码，带有很多< br> 以实现页面的垂直中心。任何人都可以帮助我找到一个很好的解决这个问题的方法。
I have tried some WYSIWYG software like KompoZer, but when I looked to the source code, it had generated a horrible static code with a lot of <br> to achieve the vertically center of the page.Anybody could help me finding a good solution to this problem
推荐答案
水平居中很容易 - 垂直居中在css中有点棘手，因为它不是真正支持的（除了表格单元格< td> 坏的风格布局，除非一个表真的需要 - 一个表）。但是你可以使用语义正确的html标签并应用表格显示属性。
Centering horizontally is easy - centering vertically is a bit tricky in css as it's not really supported (besides table cells <td>, which is bad style for layouting unless a table is really needed as - well - a table). But you can use semantically correct html tags and apply table display properties to it.
这是一个可能的解决方案 - 有很多方法，这里有一篇很好的文章。
That's one possible solution - there are many approaches, here is a good article on that.
在你的情况下，这样的东西应该足够了：
In your case something like that should be sufficient:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Hello World</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
display: table;
}
.my-block {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="my-block">
WORD1<br />
WORDWORDWORDWORD2
</div>
</body>
</html>
这篇关于如何使文本在HTML页面中垂直和水平居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
