Question

我无法垂直居中摆放图片。我已经尝试过在这个网站上发布的各种其他解决方案，但它们似乎不起作用，除非我做错了什么。这是相关的CSS：

.boxes {
  width: 145px;
  height: 100%;
  background-color: #fff;
  color: #fff;
  font-family: 'Muli', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 32px;
    text-align: center;
  display: inline-block;
  position: relative;
    border-radius: 10px 10px 10px 10px; 
  border: 1px solid #0081d6;
  margin: 0 2px 12px 12px;
      -webkit-box-shadow: 4px 4px 15px 0px rgba(0,0,0,0.81);
-moz-box-shadow: 4px 4px 15px 0px rgba(0,0,0,0.81);
box-shadow: 4px 4px 15px 0px rgba(0,0,0,0.81);
}
.boxes .heading {
  width: 145px;
  height: 40px;
  color: #fff;
  background-color: #0081d6;
  font-family: 'Muli', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 20px;
  border-radius: 10px 10px 0 0;  
  border-bottom: 4px solid #00589e;
}
  .boxes .heading a {
  color: #fff;
  font-family: 'Muli', sans-serif;
  font-size: 17px;
  font-weight: 400;
}
.boxes .image {
  width: 145px;  height: 140px;
  background-color: #fff;
  margin:0 auto;
}
.boxes .link {
  width: 145px;
  background-color: #0081d6;
  height: 38px;
    line-height: 18px;
    border-radius: 0 0 10px 10px; 
  border-top: 4px solid #00589e;
}
.boxes .link a {
  color: #fff;
  font-family: 'Muli', sans-serif;
  font-size: 14px;
  font-weight: 400;
}

这是HTML：

<div class="boxes">
<div class="heading"><a href="http://bananacomputers.co.uk/index.php?route=product/search&amp;search=CAD" target="_blank"><span>Computer Aided Design</span></a></div>

<div class="image">
<p><img alt="Computer Aided Design" height="83" src="http://bananacomputers.co.uk/image/data/5810 MAIN.jpg" width="145" /></p>
</div>

<div class="link"><a href="http://bananacomputers.co.uk/index.php?route=product/search&amp;search=CAD" target="_blank"><span style="font-size:14px;">Dell Precision Workstations</span></a></div>
</div>

非常感谢任何帮助。感谢。

Answer 1

一种可能的解决方案是使用display: table和display: table-cell。要尝试这一点，请将其添加到现有的css中：

img {
  display: block;
}
.image {
  display: table;
}
p {
  display: table-cell;
  vertical-align: middle;
}

麻烦以图像为中心

1 个答案: