HTML

Question

我有一些Java，C，数据库，网络等方面的经验。但是与Html相关的任何东西我都是一个乞丐。我唯一想要的是在页面中间居中两个单词（本页）将只有那两个字。）

                                WORD1
                          WORDWORDWORDWORD2

我尝试了一些像KompoZer这样的WYSIWYG软件，但是当我查看源代码时，它生成了一个可怕的静态代码，有很多<br>来实现页面的垂直中心。任何人都可以帮助我找到解决这个问题的好方法

Answer 1

水平居中很容易 - 垂直居中在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>

Answer 2

您可以将文字放在<div>内，并使用CSS对齐文字：

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

<div>是一个块元素，这意味着它将被拉伸到100％宽度，文本将位于页面的中心

jsFiddle示例

Answer 3

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

既然你说你是新手，我就会为你展示整个文档结构。样式应该放在head标签中，以便首先加载它，你应该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>

Answer 4

这些时间，最好使用flexbox或网格布局实现完全居中。因此，如果我们只想将某些元素置于其父元素的中心，则可以执行以下操作：

HTML

/tmp

CSS

$ telnet 169.254.72.245                                                
Trying 169.254.72.245...                                                                                  
Connected to 169.254.72.245.                        
Escape character is '^]'.                            
login: root                                                                                               
Password:                                                                                                 
                                                                                                          
                                                     
BusyBox v1.23.2 (2018-05-31 11:33:18 AEST) hush - the humble shell                                        
                                                                                                          
/ # cd /tmp                                          
/var/tmp # ./cs5368-i2c-config                       
Open GPIO device                                                                                          
Set GPIO tristate outputs                            
Set GPIO pins low                                    
Sleep for 10 secs                                    
Set GPIO pins high
Close GPIO file descriptor                           
Searching for I2C device                                                                                  
  Opening /dev/i2c-0                                                                                      
  Setting I2C_SLAVE 4c...                                                                                 
  I2C Interface found: /dev/i2c-0                                                                         
Set the CS5368 as the slave                                                                               
Set the CS5368 I2S mode to slave                                                                          
Failed to write to the 'Global Mode Control' register: Operation not permitted

Answer 5

就像

一样

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

Answer 6

最好的方法是把它放在像div这样的元素中。在div中，您可以轻松地使用text-align: center;居中文本（假设您为该div设置了一些宽度）。然后，您可以通过添加自动边距样式（margin: 0px auto;）

将该div放在页面中心

w3 manual about centering ;-)

Answer 7

要使文字居中，您可以使用<center> HTML标记：

<center>Blah</center>

或者您可以使用CSS：

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

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

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

7 个答案:

HTML

CSS