Question

我正在尝试使用这些代码来居中div，但它只是垂直居中。我希望它们是水平的。

HTML

<div class='test'>
<div class='test1'>
<img class='gamespic' src='img/{$row['pictures']}'></div>
</div>

CSS

.test{
width: 100%;
text-align: center;
}
.test1 {  
width: 220px;  
height: 300px;  
    border: solid 2px #000;  
    content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  position:relative;
}

Answer 1

像这样更改你的CSS，我还添加了整页报道以防万一（但你可以删除它）

.test {
    width: 100%;
    height:100%;
    text-align: center;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#fc0;
    position:absolute;
}
.test1 {
    width: 220px;
    height: 300px;
    border: solid 2px #000;
    content:'';
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-110px;
}

See bootply here

垂直居中多个Div

1 个答案: