Question

我想在页面上显示以下html内容：

                      Date  :  xxxx/xx/xx

                      Time  :  12:22

                      xx    :  xxxxx

                      xxxxx :  xxxxx

                      x     :  xxxxxxx

代码：

<!DOCTYPE html>
<html>
<head><title>Notification</title></head>
<body style="text-align:center;border:1px solid black">
    <br>
    <p style="text-algin:center">
                Day:Friday
                <br>
                Date:December 5,1997
                <br>
                Time:3.00pm
                <br>
                Speaker:Dr.Nicolas Lam
                <br>
                Venue:WC&nbsp311
    </p>
    <p style="text-align:right">Head of the Department</p>
</body>

我的代码的结果：

               Day:Friday
           Date:December 5,1997
              Time:3.00pm
            Lr:Dr.Nicolas Lam
              Venue:WC  311

Answer 1

使用表格标签进行正确对齐这是你想做的事情的核心

<!DOCTYPE html>
<html>
<head><title>Notification</title></head>
<body style="text-align:center;border:1px solid black">
<b>Community College(Autonomous)</b>
<br>
<span>HKUSPACE</span>
<br>
<b>Department of Computer Science</b>
<br>
<b>Seminar on HTML Programming</b>
<br>
<br>
<span>The Department of Computer Science, in its continuing effort to impart knowledge on the latest topic to students, is arranging the following seminar of HTML programming.</span>
<br>
<p style="text-align:center">
<table align="center">
<tr>
<td>Date</td>
<td> : </td>
<td>xxxx/xx/xx</td>
</tr>
<tr>
<td>Time</td>
<td> : </td>
<td>12:22</td>
</tr>
<tr>
<td>xx</td>
<td> : </td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td> : </td>
<td>xxxxx</td>
</tr>
<tr>
<td>x</td>
<td> : </td>
<td>xxxxxxx</td>
</tr>
</table>
</p>
<p style="text-align:right">Head of the Department</p>
</body>
<html>

Answer 2

首先是几个小笔记：

不要使用内联样式。将您的样式放入<style>块或加载到<link>标记的单独CSS文件中。
HTML 5中不推荐使用代码。您应该使用其他代码，例如或。我在下面的示例中使用了。

要按照您想要的方式对齐，您需要使用表格。这是一个包含上述项目的工作示例，并使用表格来格式化您要实现的3列块。

我也做了fiddle。

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
            border: 1px solid black;
        }
        .table-div {
            display: table;
            margin: 0 auto;
        }
        .left-align {
            text-align: left;
        }
        .right-align {
            text-align: right;
        }
    </style>
</head>
<body>
    <strong>Community College(Autonomous)</strong>
    <br>
    <span>HKUSPACE</span>
    <br>
    <strong>Department of Computer Science</strong>
    <br>
    <strong>Seminar on HTML Programming</strong>
    <br>
    <br>
    <span>The Department of Computer Science, in its continuing effort to impart knowledge on the latest topic to students, is arranging the following seminar of HTML programming.</span>
    <br>

    <div class="table-div">
        <table class="left-align">
            <tr>
                <td>Day</td><td>:</td><td>Friday</td>
            </tr>
            <tr>
                <td>Date</td><td>:</td><td>December 5, 1997</td>
            </tr>
            <tr>
                <td>Time</td><td>:</td><td>3.00pm</td>
            </tr>
            <tr>
                <td>Speaker</td><td>:</td><td>Dr. Nicolas Lam</td>
            </tr>
            <tr>
                <td>Venue</td><td>:</td><td>WC 311</td>
            </tr>
        </table>
    </div>
    <p class="right-align">Head of the Department</p>
</body>
</html>

Answer 3

更容易实现这一点的方法是将您想要的数据置于某个块元素的中心位置，而不是将其阻塞。

我从text-align: center;更改为text-align: left;并将margin: auto;和display: table;添加到div元素。（并且还将text-align移至div）

所以你必须改变：

<p style="text-algin:center">
            Day:Friday
            <br>
            Date:December 5,1997
            <br>
            Time:3.00pm
            <br>
            Speaker:Dr.Nicolas Lam
            <br>
            Venue:WC&nbsp311
</p>

为：

<div style="margin: auto; display: table; text-align: left;">
    <p>
                Day:Friday
                <br>
                Date:December 5,1997
                <br>
                Time:3.00pm
                <br>
                Speaker:Dr.Nicolas Lam
                <br>
                Venue:WC&nbsp;311
    </p>
</div>

你会得到你想要的结果:) 注意：您可以将width更改为您想要的任何值。

result (image)

编辑：一些拼写错误，从设置宽度改为使用表格。

Answer 4

~~将所有文本放在div中并使div居中~~

将所有文字放入其他内，并将新

置于中心位置

<p style="text-align:center">
    <p style="text-align:left">
        Day:Friday
        <br>
        Date:December 5,1997
        <br>
        Time:3.00pm
        <br>
        Speaker:Dr.Nicolas Lam
        <br>
        Venue:WC&nbsp;311
    </p>
</p>

PS：不要使用内联样式

垂直对齐所有文本并将其置于中心

4 个答案: