我正在尝试创建一个简单的 html 页面,但我无法对齐其中一个图标。我不明白我的 CSS 或 HTML 哪里出了问题。
这是我的 html 页面的图片:
.service-icon-container {
display: table;
width: 100%;
height: 80px;
color: #FCDB7A;
font-size: 65px;
}
.service-icon-tablecell {
display: table-cell;
vertical-align: middle;
}
<div class="col-md-4">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt libero, ab repudiandae incidunt dicta eveniet.</p>
</div>
</div>
最佳答案
尝试使用 CSS grid layout也可以实现相同的UI
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
}
.item {
background: #ccc;
padding: 1em;
}
<div class="container">
<div class="item">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="item">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="item">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="item">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="item">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="item">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
关于html - 如何修复图标对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57128422/