[英]Centering together 4 cells of a display-table: working on Firefox, not working on Chrome
I'm trying to put these 4 cells together and it's not working on Chrome (it used to work before, haven't changed it), but it's working on Firefox. 我正在尝试将这四个单元放在一起,并且不能在Chrome上运行(以前曾经工作过,没有更改过),但是在Firefox上却可以工作。 There is space between the cells in a row when I'm using Chrome.
当我使用Chrome时,连续的单元格之间有空间。 This shouldn't happen.
这不应该发生。 This is the page I'm talking about: http://pablotv.me/chetochine/novosite/pt/marketing-research/
这是我正在谈论的页面: http : //pablotv.me/chetochine/novosite/pt/marketing-research/
(Unfortunately, I can't post images because of my reputation on StackOverflow, I've just signed up and I'm an amateur yet) (不幸的是,由于我在StackOverflow上的声誉,我无法发布图片,我刚刚注册,但是我还是一个业余爱好者。)
Here's the HTML: 这是HTML:
<div id="mktwrapper">
<div class="row">
<div id="box-1" class="box">
<img id="image-1" src="1.png"/>
<span class="caption full-caption">
<p>Content1</p>
</span>
</div>
<div id="box-2" class="box">
<img id="image-2" src="2.png"/>
<span class="caption full-caption">
<p>Content2</p>
</span>
</div>
</div>
<div class="row">
<div id="box-3" class="box">
<img id="image-3" src="3.png"/>
<span class="caption full-caption">
<p>Content3</p>
</span>
</div>
<div id="box-4" class="box">
<img id="image-4" src="4.png"/>
<span class="caption full-caption">
<p>Content4</p>
</span>
</div>
</div>
</div>
And here's the CSS 这是CSS
#mktwrapper {
font: 24pt normal Arial, sans-serif;
height: auto;
margin: 0;
text-align: center;
display: table;
width: 100%;
}
#mktwrapper .row {
display: table-row;
}
#mktwrapper .box {
border: 0;
cursor: pointer;
height: 350px;
display: table-cell;
margin: 0 auto;
position: relative;
overflow: hidden;
width: 350px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
#mktwrapper .box {
display: block;
}
}
#mktwrapper .box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#mktwrapper .box .caption {
background-color: rgba(252,252,252,0.92);
position: absolute;
color: #111;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#mktwrapper .box .full-caption {
width: 350px;
height: 350px;
top: -350px;
text-align: left;
padding: 15px;
}
#mktwrapper .box:hover .full-caption {
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
Thanks in advance. 提前致谢。 :)
:)
Not sure but it might work: 不确定,但是可能有效:
CSS : Update these code lines to your CSS. CSS :将这些代码行更新为CSS。
.row {
display: inline-block;
width: 100%;
text-align: center;
margin: 0px auto;
}
.box
{
display: inline-block;
}
NOTE : If you have multiple div's with class 'row' than use inline CSS or else would effect all div containing class 'row'.
注意:如果您的类'row'有多个div而不是使用内联CSS,否则将影响所有包含类'row'的div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.