Question

我在网站上有以下代码，但无法将主要内容中的所有内容（rightBarItems）置于中心位置：

<div class="rightBarItems">
<?php
echo "<div class='similarTitle'>YOU MAY ALSO LIKE</div>";
while ($row3 = $result3->fetch())
{
echo "<div class='similarItems'>";
echo "<a href='items_descr.php?itemId=".$row3[id_item]."'><img class='similarImage' src='images/{$row3[thumb1]}.jpg'></img>";
echo "<div class='similarItemsText'>".$row3[name]."</div></div>";
}
?>

然后，这是我的css：

    .similarTitle {
    font-family:"Century Gothic","Trebuchet MS",Helvetica,Arial,sans-serif;
    font-size:15px;
    text-transform:uppercase;
    color:#3E3E3E;  
    }
.rightBarItems
{
margin: 0 auto;
width: 168px;
background: #F3EFE2;
padding: 10px;
float: right;
text-align: center; 
height: 300px;
}
    .similarItems { 
    float: left;
    text-align:center;
    margin: 0 auto;
    padding: 5px;
     }
    .similarItemsText { 
    padding-right: 11px;
    margin: 0 auto;
    font-family: verdana,Helvetica,Arial,sans-serif;
    font-size: 11px;
    color: #666;
     }
     #similarImage {
     margin: 0 auto;

     border: 1px solid gray;
     float: left;
     }

并非一切都集中......任何帮助？谢谢！！ *添加一些我忘记放置的额外CSS

Answer 1

使用：

text-align:center;

对于所有这些CSS类：rightBarItems，similarTitle，similarItemsText，similarImage。

Answer 2

在CSS中试试这个

.rightBarItems{  text-align:center ; }

或

.rightBarItems > div { margin-left:auto ; margin-right:auto; }

Answer 3

从rightBarItems div中删除float:right样式。

Answer 4

嗯，首先，每个类都有不同的填充值，因此首先会阻止它们对齐。

如果您可以在文本之间留下段落空格，那么align=center应该使用段落标记而不是修复整个CSS代码。

<p align="center"> Centered Text </p>

将内容置于div中。无法进入中心

4 个答案: