Html 如何将容器置于柱的中心？
我不知道如何在我的列中居中放置图像容器。此外，由于某种原因，即使所有设置都与其他两个设置完全相同，中间的图片也不会显示，这是有原因的吗 此外，无论出于何种原因，我的专栏在使用谷歌浏览器时格式不正确。我以为webkit会解决这个问题Html 如何将容器置于柱的中心？,html,css,css-multicolumn-layout,Html,Css,Css Multicolumn Layout,我不知道如何在我的列中居中放置图像容器。此外，由于某种原因，即使所有设置都与其他两个设置完全相同，中间的图片也不会显示，这是有原因的吗 此外，无论出于何种原因，我的专栏在使用谷歌浏览器时格式不正确。我以为webkit会解决这个问题 .columns{ -webkit列数：3； -moz列数：3； 列数：3； 柱间距：20px； } .列格式{ 显示：内联块； 宽度：自动； } .图像容器{ 显示：内联块； 边框：1px实心#ddd； 边界半径：4px； 填充物：5px； 过渡：0.3s； 盒影
.columns{
-webkit列数：3；
-moz列数：3；
列数：3；
柱间距：20px；
}
.列格式{
显示：内联块；
宽度：自动；
}
.图像容器{
显示：内联块；
边框：1px实心#ddd；
边界半径：4px；
填充物：5px；
过渡：0.3s；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
保证金：自动；
}
.图像容器悬停{
盒影：0 0 2px 1px rgba（0，140，186，0.5）；
专业人士
作为俄亥俄州东北部的景观设计师，景观美化公司自1981年以来一直在关注Cuyahoga县的客户及其财产
我们的核心价值观：
- 每天都带着积极的态度
- 努力工作，积极投入，乐于助人，富有成效
- 在任何场合，对所有人都要公平和尊重
服务
无论您是新来的Cuyahoga县，更换景观服务提供商，还是需要在现有帐户中添加服务，景观公司都会为您提供方便
我们在景观行业的各个方面都有丰富的经验，通过满足您在以下领域的所有需求，我们实现了我们的一个目标-全面护理理念：
居住景观
维护景观
设计/安装
植物保健
使命
说到俄亥俄州东北部的住宅景观维护，我们有一个相当简单的任务
我们的使命是团结人们建立积极的关系，改善生活
这不仅包括我们伟大的客户，还包括我们每天都与之合作的优秀员工和供应商
如果我们没有改善你的生活，那么我们就没有履行我们的使命
.columns{
-webkit列数：3；
-moz列数：3；
列数：3；
柱间距：20px；
}
.列格式{
文本对齐：居中；
保证金：自动；
}
.图像容器{
显示：内联块；
边框：1px实心#ddd；
边界半径：4px；
填充物：5px；
过渡：0.3s；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
保证金：自动；
文本对齐：居中；
}
.图像容器悬停{
盒影：0 0 2px 1px rgba（0，140，186，0.5）；
JS-Bin
专业人士
作为俄亥俄州东北部的景观设计师，景观美化公司自1981年以来一直在关注Cuyahoga县的客户及其财产
我们的核心价值观：
- 每天都带着积极的态度
- 努力工作，积极投入，乐于助人，富有成效
- 在任何场合，对所有人都要公平和尊重
服务
无论您是新来的Cuyahoga县，更换景观服务提供商，还是需要在现有帐户中添加服务，景观公司都会为您提供方便
我们在景观行业的各个方面都有丰富的经验，通过满足您在以下领域的所有需求，我们实现了我们的一个目标-全面护理理念：
居住景观
维护景观
设计/安装
植物保健
使命
说到俄亥俄州东北部的住宅景观维护，我们有一个相当简单的任务
我们的使命是团结人们建立积极的关系，改善生活
这不仅包括我们伟大的客户，还包括我们每天都与之合作的优秀员工和供应商
如果我们没有改善你的生活，那么我们就没有履行我们的使命
.columns{
-webkit列数：3；
-moz列数：3；
列数：3；
柱间距：20px；
}
.列格式{
文本对齐：居中；
保证金：自动；
}
.图像容器{
显示：内联块；
边框：1px实心#ddd；
边界半径：4px；
填充物：5px；
过渡：0.3s；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
保证金：自动；
文本对齐：居中；
}
.图像容器悬停{
盒影：0 0 2px 1px rgba（0，140，186，0.5）；
JS-Bin
专业人士
作为俄亥俄州东北部的景观设计师，景观美化公司自1981年以来一直在关注Cuyahoga县的客户及其财产
我们的核心价值观：
- 每天都带着积极的态度
- 努力工作，积极投入，乐于助人，富有成效
- 在任何场合，对所有人都要公平和尊重
服务
无论您是新来的Cuyahoga县，更换景观服务提供商，还是需要在现有帐户中添加服务，景观公司都会为您提供方便
我们在景观行业的各个方面都有丰富的经验，通过满足您在以下领域的所有需求，我们实现了我们的一个目标-全面护理理念：
居住景观
维护景观
设计/安装
植物保健
使命
说到俄亥俄州东北部的住宅景观维护，我们有一个相当简单的任务
我们的使命是团结人们建立积极的关系，改善生活
这不仅包括我们伟大的客户，还包括我们每天都与之合作的优秀员工和供应商
如果我们没有改善你的生活，那么我们就没有履行我们的使命
<div class="columns-format">
<div class='text-container'>
<h4>Professionals</h4>
<p>As Northeast Ohio Landscapers, Landscaping Company has been caring for customers and their properties throughout Cuyahoga County since 1981.</p>
<p>Our core values:
<ul>
<li>Bring a positive attitude with you each and every day</li>
<li>Work hard, pitch in, be helpful and productive</li>
<li>Be fair and respectful with all people in all encounters</li>
</ul>
</p>
</div>
<div class="image-container">
<a target="_blank" href="images/stairwell.jpg">
<img src="images/stairwell.jpg" width="250px" height="200px">
</a>
</div>
</div>
.text-container{text-align: left;}
.columns-format {
display: inline-block;
width: auto;
float: left;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
column-gap: 20px;
}
.columns-format {
display: inline-block;
width: auto;
}
.image-container {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 0 auto;
}
.image-container hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.centered{
text-align:center;
}
</style>
</head>
<body>
<div class="columns">
<div class="columns-format">
<h4>Professionals</h4>
<p>As Northeast Ohio Landscapers, Landscaping Company has been caring for customers and their properties throughout Cuyahoga County since 1981.</p>
<p>Our core values:
<ul>
<li>Bring a positive attitude with you each and every day</li>
<li>Work hard, pitch in, be helpful and productive</li>
<li>Be fair and respectful with all people in all encounters</li>
</ul>
</p>
<div class = "centered">
<div class="image-container">
<a target="_blank" href="images/stairwell.jpg">
<img src="http://placehold.it/200x200" width="250px" height="200px">
</a>
</div>
</div>
</div>
<div class="columns-format">
<h4>Services</h4>
<p>Whether you are new to Cuyahoga County, switching landscape service providers, or need to add a service to your existing account, Landscaping Company makes it easy for you.</p>
<p>Experienced in every facet of the landscape industry, we fulfil our one goal - total care philosophy by meeting your every need in the following areas:</p>
<p>Residential Landscape</p>
<p>Maintenance Landscape</p>
<p>Design/Installation</p>
<p>Plant Health Care</p>
<div class = "centered">
<div class="image-container">
<a target="_blank" href="images/flowers.jpg">
<img src="http://placehold.it/200x200" width="250px" height="200px">
</a>
</div>
</div>
</div>
<div class="columns-format">
<h4>Mission</h4>
<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.</p>
<p>Our mission is to unite people in positive relationships to improve lives.</p>
<p>This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day.</p>
<p>If we are not improving your life then we are not living up to our mission.</p>
</div>
<div class = "centered">
<div class="image-container">
<a target="_blank" href="images/lighting.jpg">
<img src="http://placehold.it/200x200" width="250px" height="200px">
</a>
</div>
</div>
</div>
</body>
</html>