居中调整后的div与均匀空间调整大小？

你好，我有一个问题，得到一个居中的div内的元素出现在中间，水平空间甚至在左侧和右侧之间。居中调整后的div与均匀空间调整大小？

问题不在于居中div，而是在窗口太小时（例如智能手机）保持空间不变，并且由于该页面预计能够响应并加载到我希望的任何屏幕上甚至是。这是HTML代码的样子：

<body> 
<div class="header"> 
<h1 align="center">CRM</h1> 
</div> 
<div class="col-12 col-m-12"> 
<div class="row"> 
<div id="group1">  
    <div class="tile amarelo" onclick="location.href='http://stackoverflow.com/'"> 
    <span class="titulo">Calendar Placeholder</span><br/> 
    </div> 
    <div class="tile azul"> 
    <span class="titulo">Budget Placeholder</span><br/> 
    </div> 
    <div class="tile azul"> 
    <span class="titulo">Program X</span><br/> 
    </div> 
    <div class="tile azul"> 
    <span class="titulo">Program Y</span><br/> 
    </div> 
    </div> 

    <div id="group2"> 
    <div class="tile azul"> 
    <span class="titulo">Program W</span><br/> 
    </div> 
    <div class="tile azul"> 
    <span class="titulo">Program Z</span><br/> </div> 
</div> 
</div> 
</div> 
</body>

CSS：

@media only screen and (min-width: 600px) { 
/* For tablets: */ 
.col-m-1 {width: 8.33%;} 
.col-m-2 {width: 16.66%;} 
.col-m-3 {width: 25%;} 
.col-m-4 {width: 33.33%;} 
.col-m-5 {width: 41.66%;} 
.col-m-6 {width: 50%;} 
.col-m-7 {width: 58.33%;} 
.col-m-8 {width: 66.66%;} 
.col-m-9 {width: 75%;} 
.col-m-10 {width: 83.33%;} 
.col-m-11 {width: 91.66%;} 
.col-m-12 {width: 100%;} 
} 
@media only screen and (min-width: 768px) { 
/* For desktop: */ 
.col-1 {width: 8.33%;} 
.col-2 {width: 16.66%;} 
.col-3 {width: 25%;} 
.col-4 {width: 33.33%;} 
.col-5 {width: 41.66%;} 
.col-6 {width: 50%;} 
.col-7 {width: 58.33%;} 
.col-8 {width: 66.66%;} 
.col-9 {width: 75%;} 
.col-10 {width: 83.33%;} 
.col-11 {width: 91.66%;} 
.col-12 {width: 100%;} 

} 
[class*="col-"] { 
margin:0 auto; 
border: 1px solid red; 
} 
.da{ 
background-color:#FF0000; 

} 

.db{background-color:#0101DF;} 
.hide{ 
display:none; 
    } 

.row:after { 
content: ""; 
clear: both; 
display: block; 
} 



body{ 
font-family: Calibri; 
background: rgb(51,51,51); 
color: #fff; 
} 

.row{ 
width:auto; 
padding:5px; 
height:auto; 
display:table; 
margin:0 auto;  
} 

.tile{ 

cursor:pointer; 
height:110px; 
width:110px; 
float:left; 
margin:5px 5px 5px 5px; 
padding:2px; 
} 

.amarelo{ 
background:#DAA520; 
} 

.azul{ 
background:#4682B4; 
} 

.header { 
background-color: #58D3F7; 
color: #ffffff; 
padding: 15px; 
}

我已经在这里创造一个小提琴：http://jsfiddle.net/DiogoSilva/ojnkbzbd/1/

当我调整窗口大小的实际情况是元素向左和右侧的限制比左侧的更大。

编辑：

PRINTSCREEN补充说：http://s8.postimg.org/yo55yy1wl/crm_Bug.jpg

解决方案1：

从选择的答案我能达到我预想这是有中心的类似智能手机的瓷砖windows手机和平板电脑屏幕和桌面屏幕的元素左侧浮动。

CSS：

@media only screen and (min-width: 400px) { 
/* For tablets: */ 
.col-m-1 {width: 8.33%;} 
.col-m-2 {width: 16.66%;} 
.col-m-3 {width: 25%;} 
.col-m-4 {width: 33.33%;} 
.col-m-5 {width: 41.66%;} 
.col-m-6 {width: 50%;} 
.col-m-7 {width: 58.33%;} 
.col-m-8 {width: 66.66%;} 
.col-m-9 {width: 75%;} 
.col-m-10 {width: 83.33%;} 
.col-m-11 {width: 91.66%;} 
.col-m-12 {width: 100%;} 
.tile-M{ 
cursor:pointer; 
height:110px; 
width:110px; 
float:left; 
display:inline-block; 
margin:5px 5px 5px 5px; 
padding:2px; 
} 

.row-M{ 
width:auto; 
padding:5px; 
height:auto; 
display:table; 
margin:0 auto;  

} 

} 
@media only screen and (min-width: 768px) { 
/* For desktop: */ 
.col-1 {width: 8.33%;} 
.col-2 {width: 16.66%;} 
.col-3 {width: 25%;} 
.col-4 {width: 33.33%;} 
.col-5 {width: 41.66%;} 
.col-6 {width: 50%;} 
.col-7 {width: 58.33%;} 
.col-8 {width: 66.66%;} 
.col-9 {width: 75%;} 
.col-10 {width: 83.33%;} 
.col-11 {width: 91.66%;} 
.col-12 {width: 100%;} 
.tile-D{ 
cursor:pointer; 
height:110px; 
width:110px; 
float:left; 
display:inline-block; 
margin:5px 5px 5px 5px; 
padding:2px; 
} 

    .row-D{ 
    width:auto; 
    padding:5px; 
    height:auto; 
    display:table; 
    margin:0 auto;  

} 
} 
[class*="col-"] { 
margin:0 auto; 
border: 1px solid red; 
} 
.da{ 
background-color:#FF0000; 

} 

.db{background-color:#0101DF;} 



.hide{ 
display:none; 
} 

.row:after { 
content: ""; 
clear: both; 
display: block; 
} 



body{ 
font-family: Calibri; 
background: rgb(51,51,51); 
color: #fff; 
} 

.row{ 

width:auto; 
padding:5px; 
height:auto; 
display:table; 
margin:0 auto;  
text-align:center; 


} 

.tile{ 

cursor:pointer; 
height:110px; 
width:110px; 
display: inline-block; 
overflow: auto; 
margin:5px 5px 5px 5px; 
padding:2px; 
text-align:left; 



} 

.amarelo{ 
background:#DAA520; 
} 

.azul{ 
background:#4682B4; 
} 

.header { 
background-color: #58D3F7; 
color: #ffffff; 
padding: 15px; 
}

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<meta http-equiv="Content-Type" content="text/html"/> 
<link rel="stylesheet" href="css/menu.css"/> 
    <script type="text/javascript" src="javascript/jquery-1.8.3.min.js">  </script> 
    <script type="text/javascript" src="javascript/mainMenu.js"></script> 
<title>CRM</title> 
</head> 
<body> 
<div class="header"> 
<h1 align="center">CRM</h1> 
</div> 
<div id="conteudo" class="col-12 col-m-12"> 
<div class="row row-D row-M"> 
<div id="group1">  
    <div id="tile" class="tile tile-D tile-M amarelo"> 
    <a href="Calendar/calendar.jsp"></a> 
    <span class="titulo">Calendar Placeholder</span><br/> 
    </div> 
    <div class="tile tile-D tile-M azul"> 
     <a href="http://stackoverflow.com/"></a> 
    <span class="titulo">Budget Placeholder</span><br/> 
    </div> 
    <div class="tile tile-D tile-M azul"> 
    <span class="titulo">Program X</span><br/> 
    </div> 
    <div class="tile tile-D tile-M azul"> 
    <span class="titulo">Program Y</span><br/> 
    </div> 
    </div> 

    <div id="group2"> 
    <div class="tile tile-D tile-M azul"> 
    <span class="titulo">Program W</span><br/> 
    </div> 
    <div class="tile tile-D tile-M azul"> 
    <span class="titulo">Program Z</span><br/> </div> 
</div> 
</div> 
</div> 
</body> 
</html>

来源

2015-07-13 Diogo Silva

它接缝你的float:left;是粉碎的居中。

您可以尝试在你的.row和display:inline-block;，overflow:auto;和text-align:left;使用text-align:center;您.tile居中的箱子：

.row{ 
    width:auto; 
    padding:5px; 
    height:auto; 
    display:table; 
    margin:0 auto;  
    text-align:center; 
} 
.tile{ 
    cursor:pointer; 
    height:110px; 
    width:110px; 
    display: inline-block; 
    overflow: auto; 
    margin:5px 5px 5px 5px; 
    padding:2px; 
    text-align:left; 
}

请裸记住，新#groupN总是会启动一个新行。

请参阅本FIDDLE

来源

2015-07-13 12:00:21 Wavemaster

它按预期工作，但现在它始终居中的元素，但我认为我可以通过让CSS应用float来解决它：当窗口达到一定的尺寸时离开 –

我设法实现预期的结果并进行了一些调整谢谢...我会在后更新我的代码 –

I'我很高兴我可以帮你:) – Wavemaster

这是你想要什么？

.tile{ 
    cursor:pointer; 
    height:110px; 
    width:110px; 
    display:inline-block; 
    margin:5px 5px 5px 5px; 
    padding:2px; 
}

Demo

来源

2015-07-13 11:11:55 Era

感谢您的回答，但我已经试过了，并没有工作，我就来打印屏幕，并把它放在主哨。 –

这个怎么样？

你会看到我已经做了以下修改：

.tile{ 
    cursor:pointer; 
    height:110px; 
    width: 100%; 
    float:left; 
    margin:5px 0; 
    padding:2px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

@media only screen and (min-width: 480px) { 
    .tile {width: 48%; margin:5px 1%; padding: 10px;} 
} 

@media only screen and (min-width: 600px) { 
    .tile {max-width:31%;} 
} 

@media only screen and (min-width: 768px) { 
    .tile {max-width:23%;} 
}

请参阅example，我已经添加了红色背景为例如.row容器。我也从你的HTML中删除<div class="col-12 col-m-12">，因为我不确定这个囚徒在干什么，但是你可能需要重新加入，因为我只关注这个例子中的子容器堆栈。

来源

2015-07-13 11:48:42 JRW

我已经尝试过它，它的工作原理，但改变瓷砖的大小不是一个选项，我害怕...谢谢你的回答艰难，但我现在有一个解决方案 –

居中调整后的div与均匀空间调整大小？

回答

相关问题