如何使用 CSS 水平对齐 HTML答案

【问题标题】：How to align HTML horizontaly using CSS如何使用 CSS 水平对齐 HTML
【发布时间】：2013-09-24 12:54:26
【问题描述】：

如果可能的话，是否可以将 HTML 元素水平对齐在一行中比如我的代码：

<html>
    <head>
    <title>Invoice</Title>
        <body>
            <header>
            <h1>Cafe au Lait Invoice</h1>
            <h2><?php echo $address;  ?></h2>
            <h3>Ph: <?php echo $phone_no;?></h3>
            <h4>Date: <?php echo "$date at $time";?>
            </header>
        Coffee Ordered: 
            <?php 
                if ($cappuccino > 0)
                {
                    Print "<p>Cappuccino ";
                }
                if ($espresso > 0)
                {
                    Print "<p>Espresso ";
                }
                if ($double > 0)
                {
                    Print "<p>Double Espresso";
                }
                if ($latte > 0)
                {
                    Print "<p>Latte ";
                }
                if ($flat > 0)
                {
                    Print "<p>Flat White";
                }
                if ($ice > 0)
                {
                    Print "<p>Ice Coffee";
                }
            ?>  
            Qty: 
            <?php 
                if ($cappuccino > 0)
                {
                    Print "<p>$cappuccino_qty ";
                }
                if ($espresso > 0)
                {
                    Print "<p>$espresso_qty ";
                }
                if ($double > 0)
                {
                    Print "<p>$double_espresso_qty";
                }
                if ($latte > 0)
                {
                    Print "<p>$latte_qty ";
                }
                if ($flat > 0)
                {
                    Print "<p>$flat_white_qty";
                }
                if ($ice > 0)
                {
                    Print "<p>$ice_coffee_qty";
                }
            ?>  

        </body> 
    </head>
</Html>

“Coffee Ordered”和“Qty”彼此相邻。我是否必须重写代码才能这样做？我的想法类似于这个模板，http://www.docstoc.com/docs/46248123/Pizza-Hut-Price-List，其中“Pizza Hutt...”是“Coffee Ordered”，“Item”是“Qty”。

【问题讨论】：

你不知道上面的代码是做什么的，是吗？
当然不是。我也期待if ($cappuccino_qty > 0)
抱歉我赶时间

标签： html css alignment

【解决方案1】：

在 html 中创建一个带有不可见边框的表格。你可以这样做：

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

然后像这样通过css使边框不可见：

table, tr, td {
    border: none;
}

在此处阅读有关表格的信息： http://www.w3.org/TR/REC-html40/struct/tables.html

这里是关于表格样式的： http://www.w3.org/TR/CSS21/tables.html

【讨论】：

快速提问如何让它不可见？
我发现你可以使用来获得不可见的边框