15

我在 Java、C、数据库、网络等方面有一些经验。但是任何与 Html 相关的东西我都是初学者。我唯一要寻找的是将两个单词放在页面中间（这个页面只有这两个字）。

                                WORD1
                          WORDWORDWORDWORD2

我尝试过一些所见即所得的软件，例如 KompoZer，但是当我查看源代码时，它生成了一个可怕的静态代码，其中包含很多<br>实现页面垂直中心的东西。任何人都可以帮助我找到解决这个问题的好方法

4

7 回答 7

29

水平居中很容易 - 在 css 中垂直居中有点棘手，因为它并没有得到真正的支持（除了表格单元格<td>，这是一种不好的布局风格，除非真的需要一个表格 - 以及 - 一个表格）。但是您可以使用语义正确的 html 标记并将表格显示属性应用到它。

这是一个可能的解决方案 - 有很多方法，这里有一篇很好的文章。

在你的情况下，这样的事情就足够了：

<!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>
于 2012-03-22T15:58:57.157 回答
2

您可以将文本放在 a 中<div>并使用 CSS 对齐文本：

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

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

jsFiddle示例

于 2012-03-22T15:52:03.553 回答
1

做到这一点的“最佳实践”方法是：

既然你说你是新人，我就为你展示整个文档结构。样式应放在 head 标签中，以便首先加载，并且应尽可能避免使用内联样式。

<!DOCTYPE html>
<html>
    <head>
    <style>
    .center{
        text-align:center;
    }
    </style>
    </head>
    <body>
       <div class="center">
           <p>WORD1</p>
           <p>WORDWORDWORDWORD2</p>
        </div>
    </body>
</html>
于 2012-03-22T15:51:28.690 回答
1

这些时间完全居中最好使用 flexbox 或网格布局来实现。因此，如果我们只想在其父元素中居中某个元素，我们可以这样做：

HTML

<div class="parent">
   <div class="child">Some Stuff</div>
</div>

CSS

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

/* Or this way if the page doesn't have to uncenter with changing screen size */
/* .parent {
       display: flex;
       place-items: center;
   }  */

.child {
    text-align: center;   /* If we want the child element's content horiz centered within its own container */
}
于 2020-06-24T10:17:58.693 回答
0

就这样做

<div style="text-align:center;">
   WORD1<br />
   WORDWORDWORDWORD2
</div>
于 2012-03-22T15:49:58.317 回答
0

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

w3 关于居中的手册 ;-)

于 2012-03-22T15:51:09.820 回答
-1

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

<center>Blah</center>

或者你可以使用 CSS：

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

<a class='centered_text'>Blah</a>
于 2012-03-22T15:50:35.403 回答