HTML / CSS文本对齐

Question

我是Web开发的正式新手，似乎有点不高兴。 我正在创建Garry的Mod加载屏幕，我需要帮助文本使两个包装之间的间隙对齐。

这就是它的样子： ☻

事实证明图片很无聊，所以这里是实时页面的链接： ☻

当前的html是：

<table width="46%" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td align="center">
            <span class="TitleStyle">
                <div class="LoadEnhancment">
                    <dl>
                        <dt>
                        <img src="<?php echo $steamUser->getMediumAvatarUrl() ?>"/><br />
                        <?php echo "Welcome <span class='persona'>" . $nickname . "</span>"; ?><hr />
                        </dt>
                    </dl>
            </span>
            <span class="VolTx1">
                Hello.<br />
                This is a new line.
            </span>
            <span class="VolBlk">
            </span>
            <span class="VolTx2">
                Hello.
            </span>
            </div>
        </td>
    </tr>
</table>

CSS：

.VolTx1 {
    font-family: DetailedFont;
    font-size: 30;
    color: white;
    margin: 32px;
    text-align: center;
}
.VolBlk {
    height: 800px;
    width: 200px
}
.VolTx2 {
    font-family: DetailedFont;
    font-size: 30;
    color: white;
    margin: 32px;
    text-align: center;
}

Answer 1

尝试使用此html

<div class="wrapper">
   <div class="VolTx1">
   Hello.<br />
    This is a new line.
   </div>
   <div class="VolBlk"></div>
   <div class="VolTx1">
       Hello.
   </div>
   <br class="clear">
</div>

和CSS

.wrapper {
width: 800px;
margin: 0 auto;
}
.VolTx1 {
float:left;
width:200px;
padding:50px;
font-size: 30px;
color: #fff;
font-family: DetailedFont;
}
.VolBlk {
float: left;
width: 136px;
margin: 0 32px;
}
.clear {
clear: both;
}

代替

<span class="VolTx1">
Hello.<br />
This is a new line.
</span>
<span class="VolBlk">
</span>
<span class="VolTx2">
Hello.
</span>

我建议在这种情况下不要使用表。

Answer 2

您的DOCTYPE不正确。 从html5删除5

更新您的文档类型，然后根据新标准优化整个代码。