无法将内容移动到中心答案

【问题标题】：Cant move content to center无法将内容移动到中心
【发布时间】：2015-09-09 20:29:09
【问题描述】：

我正在尝试将其居中：

[![在此处输入图片描述][1]][1]

这是 HTML：

<section class="page-section parallax directions" id="location" style="padding-top:10%">
    <div class="container div-table">
    <div class="parallax-bg" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-150"></div>
    <div class="parallax-overlay"></div>
    <div class="parallax-inner text-center">
        <?php
            session_start();
            if(isset($_SESSION['playername']))
            {
            ?>
        <div class="panel panel-warning" style="padding-left:10px;padding-right:10px">
            <h3 class='panel-header panel shadow text-center'><?php echo $_SESSION['playername'] ?> UCP</h3>
            <div class="panel panel-body">
                <table>
                    <tr>
                        <td class="text-center">
                            <h4><a href="signature.php?user=<?php echo $_SESSION['playername'] ?>">My Signature</a></h4>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">
                            <h4><a href="profile.php?user=<?php echo $_SESSION['playername'] ?>">My Profile</a></h4>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">
                            <h4><a href="account/change.php">Change My Password</a></h4>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">
                            <h4><a href="logout.php">Logout</a></h4>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <?php
            }
            else
            {
                header("location:index.php");
            }
            ?>
    </div>
</section>

如果是这样的话，我正在使用引导程序。

编辑：我已经完全编辑了上面的代码，但我没有完全显示。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

试试 padding-left:auto;和填充权：自动；相反，10px 并不是很多

问候

雷切尔

【讨论】：

如果你想使用 %，使用 40% 并让你的 div 宽度为 20%

【解决方案2】：

一些简单的 CSS 怎么样...

<div class="panel panel-body" style="width:150px;margin:auto;border:1px solid black;">

我设置了边框，以便您可以根据需要更好地调整宽度。您也可以在宽度中使用百分比。

【讨论】：

【解决方案3】：

为您的表格创建一个 ID，例如 mytable 并设置如下样式：

#mytable {
    margin-left: auto;
    margin-right: auto;
}

这是jsfiddle。

【讨论】：

【解决方案4】：

在你的桌子上使用margin:auto

.centerTable {
    margin: auto;
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="page-section parallax directions" id="location" style="padding-top:10%">
    <div class="container div-table">
        <div class="parallax-bg" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-150"></div>
        <div class="parallax-overlay"></div>
        <div class="parallax-inner text-center">

            <div class="panel panel-warning" style="padding-left:10px;padding-right:10px">
                <h3 class='panel-header panel shadow text-center'>UCP</h3>
                <div class="panel panel-body">
                    <table class="centerTable">
                        <tr><td class="text-center"><h4><a href="">My Signature</a></h4></td></tr>
                        <tr><td class="text-center"><h4><a href="">My Profile</a></h4></td></tr>
                        <tr><td class="text-center"><h4><a href="">Change My Password</a></h4></td></tr>
                        <tr><td class="text-center"><h4><a href="">Logout</a></h4></td></tr>
                    </table>
                </div>
            </div>


        </div>
    </div>
</section>

【讨论】：

为什么不能使用 bootstrap 的 'table' 类而不是 .centerTable 类？

【解决方案5】：

您正在寻找这样的东西吗？ https://jsfiddle.net/99x50s2s/100/

使用引导程序的“text-center”类并将“table”类添加到 HTML 表格中。

<div class="panel panel-warning" style="padding-left:10px;padding-right:10px">
    <h3 class='panel-header panel shadow text-center'><?php echo $_SESSION['playername'] ?> UCP</h3>
    <div class="panel panel-body">
        <table class="table">
            <tr><td class="text-center"><h4><a href="signature.php?user=<?php echo $_SESSION['playername'] ?>">My Signature</a></h4></td></tr>
            <tr><td class="text-center"><h4><a href="profile.php?user=<?php echo $_SESSION['playername'] ?>">My Profile</a></h4></td></tr>
            <tr><td class="text-center"><h4><a href="account/change.php">Change My Password</a></h4></td></tr>
            <tr><td class="text-center"><h4><a href="logout.php">Logout</a></h4></td></tr>
        </table>
    </div>
</div>

【讨论】：