如何在HTML页面中垂直和水平居中文本

问题描述：

我对Java，C，数据库，网络等有一些经验。但是任何与Html相关的东西我都是一个begginer。我期待的唯一的东西是居中在页面中间的两个单词（此页面将只有这两个单词）。如何在HTML页面中垂直和水平居中文本

       WORD1 
          WORDWORDWORDWORD2

我已经尝试了一些所见即所得的软件，如KompoZer会，但是当我看到的源代码，它已经产生了很多的<br>一个可怕的静态代码来实现page.Anybody的垂直中心可以帮助我找到一个很好的解决了这个问题

你是否也需要它垂直居中？ – 2012-03-22 15:51:34

定义“在页面中间”。居中上下（垂直）？居中左右（水平）？ – DwB 2012-03-22 15:52:19

是的西蒙，我完全感谢所有快速回答，但问题是，他们都只是解决了水平居中。我需要的是两个职位（水平和垂直）。两个字必须在页面的中心 – tt0686 2012-03-22 15:56:23

答

水平居中的中心很容易 - 垂直居中在CSS中有点棘手，因为它不是真的支持（除了表格单元格<td>，这是糟糕的布局风格，除非真的需要表格作为 - 表格）。但是您可以使用语义正确的html标签并将表格显示属性应用于它。

这是一种可能的解决方案 - 有很多方法，here is a good article on that。

在你的情况类似的东西，应该是足够了：

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

谢谢!!!完美的解决方案，并感谢链接以及 – tt0686 2012-03-22 16:04:08

不客气 - （HTML纯粹主义者会直接使用'

'作为文本容器，而不是一个额外的div）。 – acme 2012-03-22 16:47:54

答

只是不要像

<div style="text-align:center;"> 
    WORD1<br /> 
    WORDWORDWORDWORD2 
</div>

对于初学者来说，这很好，但总的来说，HTML应该尽可能地具有语义性，并且线条风格违反了委托人以及关注点的分离。 – 2012-03-22 15:55:00

答

要居中的文字，你可以使用<center> HTML标签：

<center>Blah</center>

或者你可以使用CSS：

<style> 
    .centered_text { 
    text-align:middle; 
    } 
</style> 

<a class='centered_text'>Blah</a>

'被严重弃用，不应使用。 ''默认情况下是'display：inline'，所以'text-align'属性不适用于它。 – Quentin 2012-03-22 15:51:51

'Center'已弃用。 HTML处理数据，CSS用于显示。 – 2012-03-22 15:52:09

感谢@Quentin和@Chris Sobolewski。不知道你不应该使用'

'。现在我考虑一下，对于使用''标签来进行文本对齐是正确的。我会在这里留下这个答案，以便其他人可以阅读评论，看看我出错的地方。 – Adjam 2012-03-22 17:08:10

答

最好的办法是把它放在像DIV一些元素。在div里面，你可以轻松地将文本与text-align: center;居中（假设你为该div设置了一些宽度）。然后，你可以通过添加自动保证金风格（margin: 0px auto;）中心页面上该div

w3 manual about centering ;-)

答

的“最佳实践”的方式做这将是这样的：

既然你说你是新的，我正在为您显示整个文档结构。样式应该放在头部标签中，以便首先加载，并且您应该avoid inline style as much as possible。

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
    .center{ 
     text-align:center; 
    } 
    </style> 
    </head> 
    <body> 
     <div class="center"> 
      <p>WORD1</p> 
      <p>WORDWORDWORDWORD2</p> 
     </div> 
    </body> 
</html>

答

你可以把文本<div>内部和使用CSS对齐文本：

<div style="text-align:center;"> 
    WORD1<br /> 
    WORDWORDWORDWORD2 
</div>

的<div>是，这意味着它将被拉伸至100％的宽度和文本将是一个块元件在页面

jsFiddle例如

正如另一个答案中提到的那样，对于初学者来说，这很好，但总的来说，HTML应该尽可能的语义化，并且线条风格违反了主体以及关注点的分离。 – 2012-03-22 16:05:27

答

不为IE6，但仍然可以工作。

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    /* bring your own prefixes */ 
    transform: translate(-50%, -50%); 
}

如何在HTML页面中垂直和水平居中文本

相关推荐