[英]How to center left floated items for mobile phone view in CSS?
我有一个网页,在台式机上看起来不错,但在手机上效果却不如网格上的项目向左浮动,但我希望它们居中显示。 我可以添加一个简单的“ @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; }
使用此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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.