如何在CSS中將左浮動的項目居中放置在手機視圖中？

Question

我有一個網頁，在台式機上看起來不錯，但在手機上效果卻不如網格上的項目向左浮動，但我希望它們居中顯示。 我可以添加一個簡單的“ @media only screen”代碼，也可以更改以下CSS使其位於移動設備上嗎？ 另外， div class =“ col-xs-12 col-sm-6 col-lg-6” ，這是一個圖像示例：桌面與移動視圖

您也可以在以下網址查看實時示例-http: //www.helpme.ae/

.GRID
width:170px;
height:235px;
background:#f4f4f4;
border:1px solid #dedede;
padding:4px;
border-radius:4px;
text-align: center;
float:left;
margin:9px;
margin-bottom:20px;
position:relative

.XOX
display: block;
margin-bottom: 3px;
margin-top: 0px; 
overflow:hidden

.widget-container
{
text-align:left
}

.widget-container ul { padding:0; margin:0; list-style-type:none }
.widget-container ul li { margin-bottom:6px; }

Answer 1

使用此CSS：

@media (max-width: 991px) {
  .latest-posted-tasks-big {
    text-align: center;
  }
  .latest-posted-tasks-big > * {
    text-align: initial;
  }
  .latest-posted-tasks-big > .grid_task {
    display: inline-block;
    float: none;
  }
}