居中調整後的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與均勻空間調整大小？

回答

相關問題