css - 我无法将 div 的内容居中

Question

我有一个脚本可以从 mysql 查询中获得 9 个结果。然后我将 php 中的结果添加到 $show_status 。当我输出结果时，我无法让它们全部居中？

我这样打印结果:

<div class="col-md-4 centered">Latest news<?echo $show_status ?></div>

最新消息居中但 $show_status 结果在左侧？

获取结果的代码是

<?

include 'db.php';
$result = mysqli_query($con,'SELECT * FROM status ORDER BY id desc LIMIT 9');

$date = array();
$person = array();
$type = array();
$status = array();
while($row = mysqli_fetch_array($result)) {

    $date[] = $row['date']; 
    $person[] = $row['person'];
    $type[] = $row['type'];
    $status[] = $row['status'];

    }


$show_status = "<div style='height: 88px;' id='news-container'>
<ul style='padding: 0pt; top: 0px;'>

<li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px; display: list-item;'>
<div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[1] $type[1]</span><BR>$person[1] $status[1]<BR>
            </div>
        </li>

        <li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px; display: list-item;'>
<div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[2] $type[2]</span><BR>$person[2] $status[2]<BR>
            </div>
        </li>

    <li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px; display: list-item;'>
            <div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[3] $type[3]</span><BR>$person[3] $status[3]<BR>
            </div>
        </li><li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px; display: list-item;'>
            <div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[4] $type[4]</span><BR>$person[4] $status[4]<BR>
            </div>
        </li><li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px;'>
            <div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[5] $type[5]</span><BR>$person[5] $status[5]<BR>
            </div>
        </li>
<li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px;'>
            <div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[6] $type[6]</span><BR>$person[6] $status[6]<BR>
            </div>
        </li>
<li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px;'>
            <div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[7] $type[7]</span><BR>$person[7] $status[7]<BR>
            </div>
        </li>
<li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px;'>
            <div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[8] $type[8]</span><BR>$person[8] $status[8]<BR>
            </div>
        </li>       

        </ul>
</div>";

?>

CSS 是:

#news-container
{
    width: auto; 
    margin: 0;
    margin-top: 5px;
    height: auto;
    border: 0px solid #ffffff;
    text-align:center;
}

#news-container ul li div
{
    width: auto; 
    border: 0px solid #a8a7a7;
    background: #a8a7a7;
    margin: 0;
    padding:0;
}

提前致谢，它让我头疼!

Answer 1

我可以建议更改以下代码吗？我将您的语句更改为一个循环，以便它们是精确的副本 - 以这种方式更容易维护，并且更难简单地在打印上搞砸。

我还取出了你的内联 CSS，并将它们放在 <style></style> 中元素，但我建议尽可能将其添加到您的 CSS 样式表中。

我也用过Heredocs而不是双引号字符串，因为它允许您在 HTML 元素中使用双引号而无需转义它们。

CSS:

<style>
    span {
         margin:auto;
         font-size:12px !important;
         color: #333638 !important;
    }
    #news-container {
          margin:auto;
          font-size:14px !important;
          text-align: center;
     }

     .centered{
          margin:auto; 
          text-align:center;
     }
</style>

PHP:

<?
    include 'db.php';
    $result     = mysqli_query($con, 'SELECT * FROM status ORDER BY id desc LIMIT 9');
    $liElements = "";
    while ($row = mysqli_fetch_array($result)) {
        $liElements .= <<<ELEMENT
            <li class="no-padding">
                <span>{$row['date']} {$row['type']}</span><br>
                {$row['person']} {$row['status']}
            </li>
ELEMENT;
    }
    $show_status = <<<NEWSCONTAINER
    <div class="no-padding" id="news-container">
        <ul class="no-padding">
            {$liElements}
        </ul>
    </div>
NEWSCONTAINER;
?>