所以我在页面上制作链接盒，并且它们必须按2分组2.这是我到目前为止所提出的。现在我希望链接框在页面伸展时自动居中，但我仍然需要它们浮动（所以当页面足够宽时它们会跳到1行）。有没有办法用html / css做到这一点？
我发布了我的代码，以便您可以看到所有内容（不知道是否有其他显示或浮动导致问题？）
body{
/*ozadje strani*/
background-image:url("images/background_test.jpg");
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
margin-top:5%;
/*krčenje strani*/
min-width:49.5em;
max-width:101em;
font-family:verdana;
color:#000000;
}
/*splošno linki*/
a:link {
text-decoration:none;
}
a:hover {
text-decoration:none;
font-weight:bold;
}
a:active {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
/*velikost celotne vsebine*/
.layout {
width:70%;
margin-left:15%;
margin-right:15%;
}
.bannerlayout {
text-align:center;
}
#ijs_logo {
display:inline-block;
}
#headersign {
display:inline-block;
vertical-align:top;
font-weight:bolder;
font-size:200%;
}
.topmenulayout{
text-align:center;
}
#topmenu {
width:100%;
display:inline-block;
background-color:#330033;
border-radius:10px;
opacity:0.8;
filter: alpha(opacity=40);
}
.menutext {
display:inline-block;
}
#linkijs {
float:left;
margin-left:5%;
color:#ffffff;
}
#linkeng {
float:right;
margin-right:5%;
color:#ffffff;
}
.content{
height:100%;
}
/*container za linkboxe*/
#linkpanel{
display:inline-block;
float:left;;
width:100%;
height:100%;
border-radius:10px;
}
.linkboxdivider {
margin:0 auto;
padding:0;
float:left;
display:inline-block;
width:35em;
height:17em;
}
.linkbox{
/*linkbox positinoning*/
margin:2%;
float:left;
display:inline-block;
/*style*/
border-radius:30px;
background-color:#ffcc99;
padding:1%;
width:15em;
height:15em;
opacity:0.7;
filter: alpha(opacity=40);
}
.linkboxtitle{
font-weight:bold;
font-size:120%;
margin-left:5%;
}
.linkboxlink {
color:#000000;
margin-left:5%;
}
.footerlayout{
text-align:center;
}
.footer {
width:100%;
display:inline-block;
background-color:#330033;
border-radius:10px;
opacity:0.8;
filter: alpha(opacity=40);
}
#tel{
float:left;
margin-left:5%;
display:inline-block;
color:#ffffff;
}
#delovnicas{
float:right;
margin-right:5%;
display:inline-block;
color:#ffffff;
}
/*napis pod footerjem*/
.underfooter {
width:100%;
padding:0;
font-size:90%;
}
#copyright {
float:left;
margin-left:5%;
display:inline-block;
padding:0;
margin-top:0;
}
#adminmail {
vertical-align:top;
float:right;
margin-right:5%;
display:inline-block;
padding:0;
margin-top:0;
}
#adminmaillink{
color:#000000;
padding:0;
margin-top:0;
}<html>
<head>
<title>//</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="defsi.css"/>
</head>
<body>
<table class="layout">
<tr class="bannerlayout">
<td>
<img id="logo" src="images/ijs_logo.gif" alt="IJSlogo" />
<p id="headersign">//</p>
</td>
</tr>
<tr class="topmenulayout">
<td>
<div id="topmenu">
<a href="http://www.ijs.si/"><p class="menutext" id="linkijs">//</p></a>
<a href="indexEN.html"><p class ="menutext" id="linkeng">//</p></a>
</div>
</td>
</tr>
<tr class="content">
<td>
<div id="linkpanel">
<div class='linkboxdivider'>
<div class="linkbox" id="novosti">
<p class="linkboxtitle">NOVOSTI</p>
<a href = "http://greyhound.ijs.si:13795/Scripts/Allsi.asp"><p class="linkboxlink">e-knjige založbe Springer</p></a>
<a href = "http://greyhound.ijs.si:13782/Scripts/Titsi.asp"><p class="linkboxlink">nove elektronske revije</p></a>
<a href = "http://greyhound.ijs.si:13784/Defsi.asp"><p class="linkboxlink">novi izvodi tiskanih revij</p></a>
<a href = "http://www.sciencemag.org/archive"><p class="linkboxlink">Science Classic</p></a>
</div>
<div class="linkbox" id="knjižnica">
<p class="linkboxtitle">KNJIŽNICA</p>
<a href = "http://greyhound.ijs.si:13786/Defsi.asp"><p class="linkboxlink">predstavitev</p></a>
<a href = "http://www.cobiss.si/scripts/cobiss?ukaz=getid&sblk=c&lani=si&bno=50108"><p class="linkboxlink">COBISS</p></a>
<a href = "mailto:illijs@ijs.si"><p class="linkboxlink">medknjižnična izposoja</p></a>
<a href = "http://splet02.izum.si/cobiss/BibPersonal.jsp?init=t"><p class="linkboxlink">bibliografije raziskovalcev</p></a>
</div>
</div>
<div class='linkboxdivider'>
<div class="linkbox" id="čitalnica">
<p class="linkboxtitle">ČITALNICA</p>
<a href = "http://greyhound.ijs.si:13782/Scripts/Titsi.asp"><p class=linkboxlink>elektronske revije</p></a>
<p class="linkboxlink">CD ROM-i</p>
</div>
<div class="linkbox" id="servisi">
<p class="linkboxtitle">SERVISI</p>
<a href = "http://greyhound.ijs.si:13790/Defsi.asp"><p class=linkboxlink>splošno zanimivi</p></a>
<a href = "http://greyhound.ijs.si:13787/Defsi.asp"><p class=linkboxlink>samo za lokalne uporabnike</p></a>
</div>
</div>
</div>
</td>
</tr>
<tr class="footerlayout">
<td>
<div class="footer">
<p id="tel">// <br />// </p>
<p id="delovnicas">// <br/> // </p>
</div>
</td>
</tr>
<tr class="underfooter">
<td>
<div class ="underfooter">
<p id="copyright">//</p>
<p id="adminmail">spletni mojster:<a id="adminmaillink" href = "mailto://@ijs.si"> av</a></p>
</div>
</td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：1)
.linkboxdivider {
margin: 0px auto;
padding: 0px;
float: left; //remove
display: inline-block; //remove
width: 35em;
height: 17em;
margin-left: auto; //add
margin-right: auto; //add
}
您必须删除float：left 和 display：inline-block行。 您必须添加margin-left：auto 和 margin-right：auto;
我添加了所有代码。
<style>
body{
/*ozadje strani*/
background-image:url("images/background_test.jpg");
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
margin-top:5%;
/*krcenje strani*/
min-width:49.5em;
max-width:101em;
font-family:verdana;
color:#000000;
}
/*splošno linki*/
a:link {
text-decoration:none;
}
a:hover {
text-decoration:none;
font-weight:bold;
}
a:active {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
/*velikost celotne vsebine*/
.layout {
width:70%;
margin-left:15%;
margin-right:15%;
}
.bannerlayout {
text-align:center;
}
#ijs_logo {
display:inline-block;
}
#headersign {
display:inline-block;
vertical-align:top;
font-weight:bolder;
font-size:200%;
}
.topmenulayout{
text-align:center;
}
#topmenu {
width:100%;
display:inline-block;
background-color:#330033;
border-radius:10px;
opacity:0.8;
filter: alpha(opacity=40);
}
.menutext {
display:inline-block;
}
#linkijs {
float:left;
margin-left:5%;
color:#ffffff;
}
#linkeng {
float:right;
margin-right:5%;
color:#ffffff;
}
.content{
height:100%;
}
/*container za linkboxe*/
#linkpanel{
display:inline-block;
float:left;;
width:100%;
height:100%;
border-radius:10px;
}
.linkboxdivider {
margin:0 auto;
padding:0;
width:100%;
height:17em;
}
.linkbox{
/*linkbox positinoning*/
margin:2%;
float:left;
display:inline-block;
/*style*/
border-radius:30px;
background-color:#ffcc99;
padding:1%;
width:18%;
height:15em;
opacity:0.7;
filter: alpha(opacity=40);
}
.linkboxtitle{
font-weight:bold;
font-size:120%;
margin-left:5%;
}
.linkboxlink {
color:#000000;
margin-left:5%;
}
.footerlayout{
text-align:center;
}
.footer {
width:100%;
display:inline-block;
background-color:#330033;
border-radius:10px;
opacity:0.8;
filter: alpha(opacity=40);
}
#tel{
float:left;
margin-left:5%;
display:inline-block;
color:#ffffff;
}
#delovnicas{
float:right;
margin-right:5%;
display:inline-block;
color:#ffffff;
}
/*napis pod footerjem*/
.underfooter {
width:100%;
padding:0;
font-size:90%;
}
#copyright {
float:left;
margin-left:5%;
display:inline-block;
padding:0;
margin-top:0;
}
#adminmail {
vertical-align:top;
float:right;
margin-right:5%;
display:inline-block;
padding:0;
margin-top:0;
}
#adminmaillink{
color:#000000;
padding:0;
margin-top:0;
}
</style>
<html>
<head>
<title>//</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="defsi.css"/>
</head>
<body>
<table class="layout">
<tr class="bannerlayout">
<td>
<img id="logo" src="images/ijs_logo.gif" alt="IJSlogo" />
<p id="headersign">//</p>
</td>
</tr>
<tr class="topmenulayout">
<td>
<div id="topmenu">
<a href="http://www.ijs.si/"><p class="menutext" id="linkijs">//</p></a>
<a href="indexEN.html"><p class ="menutext" id="linkeng">//</p></a>
</div>
</td>
</tr>
<tr class="content">
<td>
<div id="linkpanel">
<div class='linkboxdivider'>
<div class="linkbox" id="novosti">
<p class="linkboxtitle">NOVOSTI</p>
<a href = "http://greyhound.ijs.si:13795/Scripts/Allsi.asp"><p class="linkboxlink">e-knjige zalozbe Springer</p></a>
<a href = "http://greyhound.ijs.si:13782/Scripts/Titsi.asp"><p class="linkboxlink">nove elektronske revije</p></a>
<a href = "http://greyhound.ijs.si:13784/Defsi.asp"><p class="linkboxlink">novi izvodi tiskanih revij</p></a>
<a href = "http://www.sciencemag.org/archive"><p class="linkboxlink">Science Classic</p></a>
</div>
<div class="linkbox" id="knjiznica">
<p class="linkboxtitle">KNJIZNICA</p>
<a href = "http://greyhound.ijs.si:13786/Defsi.asp"><p class="linkboxlink">predstavitev</p></a>
<a href = "http://www.cobiss.si/scripts/cobiss?ukaz=getid&sblk=c&lani=si&bno=50108"><p class="linkboxlink">COBISS</p></a>
<a href = "mailto:illijs@ijs.si"><p class="linkboxlink">medknjiznicna izposoja</p></a>
<a href = "http://splet02.izum.si/cobiss/BibPersonal.jsp?init=t"><p class="linkboxlink">bibliografije raziskovalcev</p></a>
</div>
<div class="linkbox" id="citalnica">
<p class="linkboxtitle">CITALNICA</p>
<a href = "http://greyhound.ijs.si:13782/Scripts/Titsi.asp"><p class=linkboxlink>elektronske revije</p></a>
<p class="linkboxlink">CD ROM-i</p>
</div>
<div class="linkbox" id="servisi">
<p class="linkboxtitle">SERVISI</p>
<a href = "http://greyhound.ijs.si:13790/Defsi.asp"><p class=linkboxlink>splošno zanimivi</p></a>
<a href = "http://greyhound.ijs.si:13787/Defsi.asp"><p class=linkboxlink>samo za lokalne uporabnike</p></a>
</div>
</div>
</div>
</td>
</tr>
<tr class="footerlayout">
<td>
<div class="footer">
<p id="tel">// <br />// </p>
<p id="delovnicas">// <br/> // </p>
</div>
</td>
</tr>
<tr class="underfooter">
<td>
<div class ="underfooter">
<p id="copyright">//</p>
<p id="adminmail">spletni mojster:<a id="adminmaillink" href = "mailto://@ijs.si"> av</a></p>
</div>
</td>
</tr>
</table>
</body>
</html>