如何让第 n 个子元素居中？现在它可以解决问题并显示我的 div 是我想要的，但是我如何根据浏览器宽度将元素居中放置在页面中间？现在，如果我通过向左更改来居中元素:px；它仅适用于我的主显示器，但当从具有不同显示尺寸的浏览器访问网站时，它不会居中。如何解决这个问题？ 或者也许我可以在这里做点别的事情？
/* Overwiev bottom */
.content-box-s {
margin: 0 0 5px 1px;
width: 222px;
overflow: hidden;
bottom: -75px;
position: fixed;
-webkit-transition:all 0.95s ease-in-out;
-moz-transition:all 0.95s ease-in-out;
-o-transition:all 0.95s ease-in-out;
transition:all 0.95s ease-in-out;
}
.content-box-s:hover {
margin: 0 0 5px 1px;
width: 222px;
overflow: hidden;
bottom: 0;
}
.content-box-s:nth-child(1) {
left: 0;
}
.content-box-s:nth-child(2) {
left: 222px;
}
.content-box-s:nth-child(3) {
left: 442px;
}
.content-box-s .header {
background: url("../images/Build_tmp/b9de2f5b06c823d628d22c4067ee35.gif") no-repeat;
height: 32px;
font-size: 11px;
}
.content-box-s .content {
background: url("../images/Build_tmp/bd764e9b39a1a48ad708039fda1bde.gif") repeat-y;
padding: 0 15px;
}
.content-box-s p {
padding: 5px 20px;
}
.content-box-s .footer {
background: url("../images/Build_tmp/174d5c09f617701fcaf1664a414869.gif") no-repeat;
height: 21px;
margin-top: -8px;
}
div.content-box-s .header h3 {
color: #6f9fc8;
font-size: 11px;
font-weight: 700;
padding-top: 10px;
width: 222px;
text-align: center;
}
.contentbox {
margin: 0 3px 0 2px;
}
#buttonz .contentbox .header .c-left, #buttonz .contentbox .header .c-right, #buttonz .contentbox .header, #buttonz .contentbox .footer, #buttonz .contentbox .footer .c-left, #buttonz .contentbox .footer .c-right, .contentbox .header .c-left, .contentbox .header .c-right, .contentbox .header, .contentbox .footer, .contentbox .footer .c-left, .contentbox .footer .c-right {
background-image: url("../images/Build_tmp/191d6af9367f608bbee2743866c489.png");
background-repeat: repeat-x;
background-position: 0 -1px;
}
#buttonz .contentbox .header, .contentbox .header {
height: 30px;
line-height: 30px;
position: relative;
}
#buttonz .contentbox .header .c-left, #buttonz .contentbox .header .c-right, .contentbox .header .c-left, .contentbox .header .c-right {
height: 30px;
position: absolute;
top: 0;
width: 35px;
}
#buttonz .contentbox .header .c-left, .contentbox .header .c-left {
background-position: 0 -33px;
left: -2px;
right: auto;
}
#buttonz .contentbox .header .c-right, .contentbox .header .c-right {
background-position: 100% -66px;
left: auto;
right: -2px;
}
#buttonz .contentbox .content, .contentbox .content {
border-left: 5px double #000;
border-right: 5px double #000;
background: #0d1014;
margin: 0 2px;
position: relative;
z-index: 2;
}
#buttonz .contentbox .footer, .contentbox .footer {
background-position: 0 -100px;
height: 21px;
position: relative;
bottom: 5px;
left: 7px;
}
#buttonz .contentbox .footer .c-left, #buttonz .contentbox .footer .c-right, .contentbox .footer .c-left, .contentbox .footer .c-right {
height: 21px;
position: absolute;
top: 0;
width: 35px;
}
#buttonz .contentbox .footer .c-left, .contentbox .footer .c-left {
background-position: 0 -125px;
left: -8px;
right: auto;
}
#buttonz .contentbox .footer .c-right, .contentbox .footer .c-right {
background-position: 100% -150px;
left: auto;
right: -8px;
}
#inhalt .content-box-s .build-faster.disabled:hover .build-faster-img {
background-position: -25px -75px;
}
#inhalt .content-box-s .build-faster:hover .build-finish-img {
background-position: 0 -25px;
}
#inhalt .content-box-s .build-faster.disabled:hover .build-finish-img {
background-position: 0 -75px;
}
#inhalt .content-box-s .content {
min-height: 46px;
height: auto!important;
height: 46px;
padding-top: 2px;
position: relative;
}
#inhalt .content-box-s .content td.idle {
padding: 10px 0;
text-align: center;
width: 177px;
}
#inhalt .content-box-s .content td.idle a:link, #inhalt .content-box-s .content td.idle a:visited, #inhalt .content-box-s .content td.idle a:active {
display: block;
color: #fff;
text-decoration: none;
}
.no-touch #inhalt .content-box-s .content td.idle a:hover {
text-decoration: underline;
}
#inhalt .content-box-s .content table.construction {
margin: 0;
padding: 3px;
font-size: 11px;
}
#inhalt .content-box-s .content table.construction.active {
background: #171d23;
background: -moz-linear-gradient(top, #171d23 0, #101419 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #171d23), color-stop(100%, #101419));
background: -webkit-linear-gradient(top, #171d23 0, #101419 100%);
background: -o-linear-gradient(top, #171d23 0, #101419 100%);
background: -ms-linear-gradient(top, #171d23 0, #101419 100%);
background: linear-gradient(top, #171d23 0, #101419 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#171d23', endColorstr='#101419', GradientType=0);
border: 1px solid #171d23;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 100%}
#inhalt .content-box-s .content table.queue {
margin-top: 5px;
}
#inhalt .content-box-s .transport_ecke {
background: url("../images/Build_tmp/ae6b67d617f5b4a9ad508219ca02b8.png");
margin: 0 0 -18px 0;
padding: 1px 5px 2px 0;
position: relative;
text-align: right;
top: -16px;
width: 35px;
}
#inhalt .content-box-s .build-faster {
color: #fff;
float: left;
margin: auto;
width: 50%;
width: 162px;
}
#inhalt .content-box-s .build-faster-img, #inhalt .content-box-s .build-finish-img {
background: url("../images/Build_tmp/f67f646a967bc6e4f54dcfcc2c3f2b.png") -25px 0 no-repeat;
float: left;
height: 25px;
margin: 1px 7px 0 7px;
width: 25px;
}
#inhalt .content-box-s .order_dm {
margin-left: 7px;
}
#inhalt .content-box-s .build-faster.disabled .build-faster-img {
background-position: -25px -50px;
}
#inhalt .content-box-s .build-finish-img {
background-position: 0 0;
}
#inhalt .content-box-s .build-faster.disabled .build-finish-img {
background-position: 0 -50px;
}
#inhalt .content-box-s .dm_cost, #inhalt .content-box-s .buy_dm {
color: #848484;
display: inline-block;
}
#inhalt .content-box-s .dm_cost .oldPrice {
text-decoration: line-through;
font-style: italic;
}
img.queuePic {
border: 1px solid #141e26;
border-radius: 3px;
}
a:hover img.queuePic {
border-color: #e7ae46;
}
#inhalt .content-box-s .construction .first {
padding-left: 0;
padding-top: 8px;
position: relative;
width: 43px;
}
#inhalt .content-box-s .construction .first div {
position: relative;
}
#inhalt .content-box-s .construction .data .desc {
padding-left: 12px;
width: 130px;
vertical-align: middle;
}
#inhalt .content-box-s .construction .data .timer {
color: #fff;
}
#inhalt .content-box-s .construction .data .ausbau {
padding-top: 8px;
}
#inhalt .content-box-s .level {
color: #a26d00;
}
#inhalt .content-box-s .construction .data .timeProdShip {
padding-top: 5px;
}
#inhalt .content-box-s .construction .data .timeProdAll {
padding: 5px 0 0 12px;
}
#inhalt .content-box-s .construction .data .timeProdAll .shipAllCountdown, #inhalt .content-box-s .construction .data .timeProdShip .shipCountdown {
color: #fff;
font-weight: 700;
}
#inhalt .content-box-s .content table.construction tr.queue td {
color: #848484;
padding: 4px 0;
text-align: center;
width: 30px;
}
#inhalt .content-box-s .queue_link {
color: #fff;
display: block;
font-size: 11px;
margin: 0 2px;
text-align: center;
text-decoration: none;
width: 32px;
}
#box #inhalt .buildingimg .construction .pusher a.timeLink:link, #box #inhalt .buildingimg .construction .pusher a.timeLink:visited, .no-touch #box #inhalt .buildingimg .construction .pusher a.timeLink:hover, #box #inhalt .buildingimg .construction .pusher a.timeLink:active {
background: transparent none;
cursor: pointer;
display: inline;
}
#box #inhalt .buildingimg .construction .pusher {
filter: alpha(opacity=60);
-moz-opacity: .6;
-khtml-opacity: .6;
opacity: .6;
background-color: #000;
position: absolute;
z-index: 1;
width: 100%}
table.construction #Countdown, table.construction #researchCountdown, table.construction .shipCountdown {
font-weight: 700;
}
#stationbuilding .construction a, #stationbuilding .construction a:active {
display: block;
height: 100px;
width: 100px;
background: url("../images/Build_tmp/0349d693b02c1927643248e4167cf8.gif") no-repeat;
color: #ff9600;
text-decoration: none;
position: absolute;
z-index: 3;
}
.no-touch #stationbuilding .construction a:hover, #stationbuilding .construction a.active {
background: url("../images/Build_tmp/9c93d3dba7052ea7fd1758007e7959.gif") no-repeat;
}
.no-touch #resources #buttonz ul#building li a:hover, .no-touch #resources-moon #buttonz ul#building li a:hover, #resources #buttonz ul#building li a.active, #resources #buttonz ul#building li a.active:link, #resources-moon #buttonz ul#building li a.active, .no-touch #resources #buttonz ul#building li div.construction a:hover, .no-touch #resources-moon #buttonz ul#building li div.construction a:hover, #resources-moon #buttonz ul#building li a.active:link {
background: url("../images/Build_tmp/ce2e012805bae16d3bc0967600eb58.gif") no-repeat;
color: #ff9600;
text-decoration: none;
}
.no-touch #resources #buttonz ul#building li div.construction a:hover, .no-touch #resources-moon #buttonz ul#building li div.construction a:hover {
background: url("../images/Build_tmp/9c93d3dba7052ea7fd1758007e7959.gif") no-repeat;
}
.dark_highlight {
background: #181e25 url("../images/Build_tmp/5fbbb1876fcff20a8a265c06862495.png") 0 -1030px repeat-x;
background: -moz-linear-gradient(top, #2d3743 0, #181e25 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d3743), color-stop(100%, #181e25));
background: -webkit-linear-gradient(top, #2d3743 0, #181e25 100%);
background: -o-linear-gradient(top, #2d3743 0, #181e25 100%);
background: -ms-linear-gradient(top, #2d3743 0, #181e25 100%);
background: linear-gradient(to bottom, #2d3743 0, #181e25 100%);
border: 1px solid black;
border-color: #28323e #222b34 #232a34 #222b34;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 3px 0 black, inset 0 1px 1px 0 hsl(213, 22%, 32%);
-moz-box-shadow: 0 1px 3px 0 black, inset 0 1px 1px 0 hsl(213, 22%, 32%);
box-shadow: 0 1px 3px 0 black, inset 0 1px 1px 0 hsl(213, 22%, 32%);
font-size: 11px;
color: #fff;
display: inline-block;
padding: 3px 0;
text-decoration: none!important;
}
.dark_highlight:hover {
background: #2d3743 url("../images/Build_tmp/5fbbb1876fcff20a8a265c06862495.png") 0 -1080px repeat-x;
background: -moz-linear-gradient(top, #181e25 0, #2d3743 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #181e25), color-stop(100%, #2d3743));
background: -webkit-linear-gradient(top, #181e25 0, #2d3743 100%);
background: -o-linear-gradient(top, #181e25 0, #2d3743 100%);
background: -ms-linear-gradient(top, #181e25 0, #2d3743 100%);
background: linear-gradient(to bottom, #181e25 0, #2d3743 100%);
border: 1px solid black;
border-color: #232b34 #232b34 #29323d #232b34;
-webkit-box-shadow: 0 1px 3px 0 black, inset 0 -1px 1px 0 hsl(213, 27%, 26%);
-moz-box-shadow: 0 1px 3px 0 black, inset 0 -1px 1px 0 hsl(213, 27%, 26%);
box-shadow: 0 1px 3px 0 black, inset 0 -1px 1px 0 hsl(213, 27%, 26%);
}
#planet1 {
background-repeat: no-repeat;
height: 300px;
margin: 2px 2px 2px 2px;
position: relative;
width: 679px;
}
#planet1 .palnet_block_info{
color:#fff;
background: rgba(0,0,0,0.8);
-moz-border-radius: 0px 2px 2px 0px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
position:absolute;
line-height:18px;
padding:5px 8px;
}
#planet1 .palnet_block_info span{
color:#27db7d;
}
#planet1 .palnet_block_info2{
color:#fff;
background: rgba(0,0,0,0.8);
-moz-border-radius: 0px 2px 2px 0px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
position:absolute;
text-align: center;
line-height:18px;
padding:20px 10px;
bottom:0px;
width:100%;
}
.planet2 {
display: inline-block;
text-align:center;
margin: 2px 2px 2px 2px;
transition: opacity .2s, visibility .2s;
}
.planet2 .img_img{
width: 220px;
text-align:center;
height: 130px;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
.planet2:hover {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(255, 99, 71, 0.5);
-moz-box-shadow: 0px 0px 30px 0px rgba(255, 99, 71, 0.5);
box-shadow: 0px 0px 30px 0px rgba(255, 99, 71, 0.5);
}
.planet2 .img_description {
background: rgba(0, 0, 0, 0.7);
color: #fff;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}<div id="inhalt">
<div class="content-box-s">
<div class="header"><h3>Buildings</h3></div>
<div class="content">
<table cellspacing="0" cellpadding="0" class="construction active">
<tbody>
<tr>
<td colspan="2" class="idle">
<a class="tooltip" data-tooltip-content="There is no buildings done at the moment. Click here to get to your buildings page." href="../game/game.php?page=buildings">
You are not building anything at the moment.
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer"></div>
</div>
<div class="content-box-s">
<div class="header"><h3>Research</h3></div>
<div class="content">
<table cellspacing="0" cellpadding="0" class="construction active">
<tbody>
<tr>
<td colspan="2" class="idle">
<a class="tooltip" data-tooltip-content="There is no research done at the moment. Click here to get to your research lab." href="../game/game.php?page=research">
You are not researching anything at the moment.
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer"></div>
</div>
<div class="content-box-s">
<div class="header"><h3>Hangar</h3></div>
<div class="content">
<table cellspacing="0" cellpadding="0" class="construction active">
<tbody>
<tr>
<td colspan="2" class="idle">
<a class="tooltip" data-tooltip-content="There are not any activity in hangar at the moment. Click here to get to your hangar. " href="../game/game.php?page=shipyard&mode=fleet">
There are not any activity in hangar at the moment.
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer"></div>
</div>
</div>
</div>最佳答案
我建议使用 flexbox 来实现这一点。将 position: fixed; 应用于您的 #inhalt 容器，然后可以使用 flexbox 动态定位子元素。您可以使用 position: relative; 为您的悬停效果进行一些定位。
工作示例:
/* Overwiev bottom */
body {
margin: 0px;
}
#inhalt {
width: 100%;
position: fixed;
bottom: 0px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.content-box-s {
margin: 0 0 5px 1px;
width: 222px;
overflow: hidden;
position: relative;
bottom: -75px;
-webkit-transition: all 0.95s ease-in-out;
-moz-transition: all 0.95s ease-in-out;
-o-transition: all 0.95s ease-in-out;
transition: all 0.95s ease-in-out;
}
.content-box-s:hover {
margin: 0 0 5px 1px;
width: 222px;
overflow: hidden;
bottom: 0px;
}
.content-box-s .header {
background: url("../images/Build_tmp/b9de2f5b06c823d628d22c4067ee35.gif") no-repeat;
height: 32px;
font-size: 11px;
}
.content-box-s .content {
background: url("../images/Build_tmp/bd764e9b39a1a48ad708039fda1bde.gif") repeat-y;
padding: 0 15px;
}
.content-box-s p {
padding: 5px 20px;
}
.content-box-s .footer {
background: url("../images/Build_tmp/174d5c09f617701fcaf1664a414869.gif") no-repeat;
height: 21px;
margin-top: -8px;
}
div.content-box-s .header h3 {
color: #6f9fc8;
font-size: 11px;
font-weight: 700;
padding-top: 10px;
width: 222px;
text-align: center;
}
.contentbox {
margin: 0 3px 0 2px;
}
#buttonz .contentbox .header .c-left,
#buttonz .contentbox .header .c-right,
#buttonz .contentbox .header,
#buttonz .contentbox .footer,
#buttonz .contentbox .footer .c-left,
#buttonz .contentbox .footer .c-right,
.contentbox .header .c-left,
.contentbox .header .c-right,
.contentbox .header,
.contentbox .footer,
.contentbox .footer .c-left,
.contentbox .footer .c-right {
background-image: url("../images/Build_tmp/191d6af9367f608bbee2743866c489.png");
background-repeat: repeat-x;
background-position: 0 -1px;
}
#buttonz .contentbox .header,
.contentbox .header {
height: 30px;
line-height: 30px;
position: relative;
}
#buttonz .contentbox .header .c-left,
#buttonz .contentbox .header .c-right,
.contentbox .header .c-left,
.contentbox .header .c-right {
height: 30px;
position: absolute;
top: 0;
width: 35px;
}
#buttonz .contentbox .header .c-left,
.contentbox .header .c-left {
background-position: 0 -33px;
left: -2px;
right: auto;
}
#buttonz .contentbox .header .c-right,
.contentbox .header .c-right {
background-position: 100% -66px;
left: auto;
right: -2px;
}
#buttonz .contentbox .content,
.contentbox .content {
border-left: 5px double #000;
border-right: 5px double #000;
background: #0d1014;
margin: 0 2px;
position: relative;
z-index: 2;
}
#buttonz .contentbox .footer,
.contentbox .footer {
background-position: 0 -100px;
height: 21px;
position: relative;
bottom: 5px;
left: 7px;
}
#buttonz .contentbox .footer .c-left,
#buttonz .contentbox .footer .c-right,
.contentbox .footer .c-left,
.contentbox .footer .c-right {
height: 21px;
position: absolute;
top: 0;
width: 35px;
}
#buttonz .contentbox .footer .c-left,
.contentbox .footer .c-left {
background-position: 0 -125px;
left: -8px;
right: auto;
}
#buttonz .contentbox .footer .c-right,
.contentbox .footer .c-right {
background-position: 100% -150px;
left: auto;
right: -8px;
}
#inhalt .content-box-s .build-faster.disabled:hover .build-faster-img {
background-position: -25px -75px;
}
#inhalt .content-box-s .build-faster:hover .build-finish-img {
background-position: 0 -25px;
}
#inhalt .content-box-s .build-faster.disabled:hover .build-finish-img {
background-position: 0 -75px;
}
#inhalt .content-box-s .content {
min-height: 46px;
height: auto !important;
height: 46px;
padding-top: 2px;
position: relative;
}
#inhalt .content-box-s .content td.idle {
padding: 10px 0;
text-align: center;
width: 177px;
}
#inhalt .content-box-s .content td.idle a:link,
#inhalt .content-box-s .content td.idle a:visited,
#inhalt .content-box-s .content td.idle a:active {
display: block;
color: #fff;
text-decoration: none;
}
.no-touch #inhalt .content-box-s .content td.idle a:hover {
text-decoration: underline;
}
#inhalt .content-box-s .content table.construction {
margin: 0;
padding: 3px;
font-size: 11px;
}
#inhalt .content-box-s .content table.construction.active {
background: #171d23;
background: -moz-linear-gradient(top, #171d23 0, #101419 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #171d23), color-stop(100%, #101419));
background: -webkit-linear-gradient(top, #171d23 0, #101419 100%);
background: -o-linear-gradient(top, #171d23 0, #101419 100%);
background: -ms-linear-gradient(top, #171d23 0, #101419 100%);
background: linear-gradient(top, #171d23 0, #101419 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#171d23', endColorstr='#101419', GradientType=0);
border: 1px solid #171d23;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 100%
}
#inhalt .content-box-s .content table.queue {
margin-top: 5px;
}
#inhalt .content-box-s .transport_ecke {
background: url("../images/Build_tmp/ae6b67d617f5b4a9ad508219ca02b8.png");
margin: 0 0 -18px 0;
padding: 1px 5px 2px 0;
position: relative;
text-align: right;
top: -16px;
width: 35px;
}
#inhalt .content-box-s .build-faster {
color: #fff;
float: left;
margin: auto;
width: 50%;
width: 162px;
}
#inhalt .content-box-s .build-faster-img,
#inhalt .content-box-s .build-finish-img {
background: url("../images/Build_tmp/f67f646a967bc6e4f54dcfcc2c3f2b.png") -25px 0 no-repeat;
float: left;
height: 25px;
margin: 1px 7px 0 7px;
width: 25px;
}
#inhalt .content-box-s .order_dm {
margin-left: 7px;
}
#inhalt .content-box-s .build-faster.disabled .build-faster-img {
background-position: -25px -50px;
}
#inhalt .content-box-s .build-finish-img {
background-position: 0 0;
}
#inhalt .content-box-s .build-faster.disabled .build-finish-img {
background-position: 0 -50px;
}
#inhalt .content-box-s .dm_cost,
#inhalt .content-box-s .buy_dm {
color: #848484;
display: inline-block;
}
#inhalt .content-box-s .dm_cost .oldPrice {
text-decoration: line-through;
font-style: italic;
}
img.queuePic {
border: 1px solid #141e26;
border-radius: 3px;
}
a:hover img.queuePic {
border-color: #e7ae46;
}
#inhalt .content-box-s .construction .first {
padding-left: 0;
padding-top: 8px;
position: relative;
width: 43px;
}
#inhalt .content-box-s .construction .first div {
position: relative;
}
#inhalt .content-box-s .construction .data .desc {
padding-left: 12px;
width: 130px;
vertical-align: middle;
}
#inhalt .content-box-s .construction .data .timer {
color: #fff;
}
#inhalt .content-box-s .construction .data .ausbau {
padding-top: 8px;
}
#inhalt .content-box-s .level {
color: #a26d00;
}
#inhalt .content-box-s .construction .data .timeProdShip {
padding-top: 5px;
}
#inhalt .content-box-s .construction .data .timeProdAll {
padding: 5px 0 0 12px;
}
#inhalt .content-box-s .construction .data .timeProdAll .shipAllCountdown,
#inhalt .content-box-s .construction .data .timeProdShip .shipCountdown {
color: #fff;
font-weight: 700;
}
#inhalt .content-box-s .content table.construction tr.queue td {
color: #848484;
padding: 4px 0;
text-align: center;
width: 30px;
}
#inhalt .content-box-s .queue_link {
color: #fff;
display: block;
font-size: 11px;
margin: 0 2px;
text-align: center;
text-decoration: none;
width: 32px;
}
#box #inhalt .buildingimg .construction .pusher a.timeLink:link,
#box #inhalt .buildingimg .construction .pusher a.timeLink:visited,
.no-touch #box #inhalt .buildingimg .construction .pusher a.timeLink:hover,
#box #inhalt .buildingimg .construction .pusher a.timeLink:active {
background: transparent none;
cursor: pointer;
display: inline;
}
#box #inhalt .buildingimg .construction .pusher {
filter: alpha(opacity=60);
-moz-opacity: .6;
-khtml-opacity: .6;
opacity: .6;
background-color: #000;
position: absolute;
z-index: 1;
width: 100%
}
table.construction #Countdown,
table.construction #researchCountdown,
table.construction .shipCountdown {
font-weight: 700;
}
#stationbuilding .construction a,
#stationbuilding .construction a:active {
display: block;
height: 100px;
width: 100px;
background: url("../images/Build_tmp/0349d693b02c1927643248e4167cf8.gif") no-repeat;
color: #ff9600;
text-decoration: none;
position: absolute;
z-index: 3;
}
.no-touch #stationbuilding .construction a:hover,
#stationbuilding .construction a.active {
background: url("../images/Build_tmp/9c93d3dba7052ea7fd1758007e7959.gif") no-repeat;
}
.no-touch #resources #buttonz ul#building li a:hover,
.no-touch #resources-moon #buttonz ul#building li a:hover,
#resources #buttonz ul#building li a.active,
#resources #buttonz ul#building li a.active:link,
#resources-moon #buttonz ul#building li a.active,
.no-touch #resources #buttonz ul#building li div.construction a:hover,
.no-touch #resources-moon #buttonz ul#building li div.construction a:hover,
#resources-moon #buttonz ul#building li a.active:link {
background: url("../images/Build_tmp/ce2e012805bae16d3bc0967600eb58.gif") no-repeat;
color: #ff9600;
text-decoration: none;
}
.no-touch #resources #buttonz ul#building li div.construction a:hover,
.no-touch #resources-moon #buttonz ul#building li div.construction a:hover {
background: url("../images/Build_tmp/9c93d3dba7052ea7fd1758007e7959.gif") no-repeat;
}
.dark_highlight {
background: #181e25 url("../images/Build_tmp/5fbbb1876fcff20a8a265c06862495.png") 0 -1030px repeat-x;
background: -moz-linear-gradient(top, #2d3743 0, #181e25 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d3743), color-stop(100%, #181e25));
background: -webkit-linear-gradient(top, #2d3743 0, #181e25 100%);
background: -o-linear-gradient(top, #2d3743 0, #181e25 100%);
background: -ms-linear-gradient(top, #2d3743 0, #181e25 100%);
background: linear-gradient(to bottom, #2d3743 0, #181e25 100%);
border: 1px solid black;
border-color: #28323e #222b34 #232a34 #222b34;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 3px 0 black, inset 0 1px 1px 0 hsl(213, 22%, 32%);
-moz-box-shadow: 0 1px 3px 0 black, inset 0 1px 1px 0 hsl(213, 22%, 32%);
box-shadow: 0 1px 3px 0 black, inset 0 1px 1px 0 hsl(213, 22%, 32%);
font-size: 11px;
color: #fff;
display: inline-block;
padding: 3px 0;
text-decoration: none !important;
}
.dark_highlight:hover {
background: #2d3743 url("../images/Build_tmp/5fbbb1876fcff20a8a265c06862495.png") 0 -1080px repeat-x;
background: -moz-linear-gradient(top, #181e25 0, #2d3743 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #181e25), color-stop(100%, #2d3743));
background: -webkit-linear-gradient(top, #181e25 0, #2d3743 100%);
background: -o-linear-gradient(top, #181e25 0, #2d3743 100%);
background: -ms-linear-gradient(top, #181e25 0, #2d3743 100%);
background: linear-gradient(to bottom, #181e25 0, #2d3743 100%);
border: 1px solid black;
border-color: #232b34 #232b34 #29323d #232b34;
-webkit-box-shadow: 0 1px 3px 0 black, inset 0 -1px 1px 0 hsl(213, 27%, 26%);
-moz-box-shadow: 0 1px 3px 0 black, inset 0 -1px 1px 0 hsl(213, 27%, 26%);
box-shadow: 0 1px 3px 0 black, inset 0 -1px 1px 0 hsl(213, 27%, 26%);
}
#planet1 {
background-repeat: no-repeat;
height: 300px;
margin: 2px 2px 2px 2px;
position: relative;
width: 679px;
}
#planet1 .palnet_block_info {
color: #fff;
background: rgba(0, 0, 0, 0.8);
-moz-border-radius: 0px 2px 2px 0px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
position: absolute;
line-height: 18px;
padding: 5px 8px;
}
#planet1 .palnet_block_info span {
color: #27db7d;
}
#planet1 .palnet_block_info2 {
color: #fff;
background: rgba(0, 0, 0, 0.8);
-moz-border-radius: 0px 2px 2px 0px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
position: absolute;
text-align: center;
line-height: 18px;
padding: 20px 10px;
bottom: 0px;
width: 100%;
}
.planet2 {
display: inline-block;
text-align: center;
margin: 2px 2px 2px 2px;
transition: opacity .2s, visibility .2s;
}
.planet2 .img_img {
width: 220px;
text-align: center;
height: 130px;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
}
.planet2:hover {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(255, 99, 71, 0.5);
-moz-box-shadow: 0px 0px 30px 0px rgba(255, 99, 71, 0.5);
box-shadow: 0px 0px 30px 0px rgba(255, 99, 71, 0.5);
}
.planet2 .img_description {
background: rgba(0, 0, 0, 0.7);
color: #fff;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}<div id="inhalt">
<div class="content-box-s">
<div class="header">
<h3>Buildings</h3>
</div>
<div class="content">
<table cellspacing="0" cellpadding="0" class="construction active">
<tbody>
<tr>
<td colspan="2" class="idle">
<a class="tooltip" data-tooltip-content="There is no buildings done at the moment. Click here to get to your buildings page." href="../game/game.php?page=buildings">
You are not building anything at the moment.
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer"></div>
</div>
<div class="content-box-s">
<div class="header">
<h3>Research</h3>
</div>
<div class="content">
<table cellspacing="0" cellpadding="0" class="construction active">
<tbody>
<tr>
<td colspan="2" class="idle">
<a class="tooltip" data-tooltip-content="There is no research done at the moment. Click here to get to your research lab." href="../game/game.php?page=research">
You are not researching anything at the moment.
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer"></div>
</div>
<div class="content-box-s">
<div class="header">
<h3>Hangar</h3>
</div>
<div class="content">
<table cellspacing="0" cellpadding="0" class="construction active">
<tbody>
<tr>
<td colspan="2" class="idle">
<a class="tooltip" data-tooltip-content="There are not any activity in hangar at the moment. Click here to get to your hangar. " href="../game/game.php?page=shipyard&mode=fleet">
There are not any activity in hangar at the moment.
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer"></div>
</div>
</div>
</div>关于html - 在不同的显示宽度上居中第 n 个子元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49759047/