如何将容器置于柱子中心？

Question

我无法弄清楚如何将我的图像容器放在我的列中。同样由于某种原因，即使所有内容都与其他两个图片完全一致，中间图片也不会显示，是否有某种原因发生这种情况？

此外，无论出于何种原因，使用Google Chrome时我的列都无法正确格式化。我以为-webkit-想要解决这个问题？

.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: auto;
}

.image-container hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);

<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="image-container">
	<a target="_blank" href="images/stairwell.jpg">
		<img src="images/stairwell.jpg" width="250px" height="200px">
		</a>
</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="image-container">
	<a target="_blank" href="images/flowers.jpg">
		<img src="images/flowers.jpg" width="250px" height="200px">
		</a>
</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="image-container">
	<a target="_blank" href="images/lighting.jpg">
		<img src="images/lighting.jpg" width="250px" height="200px">
		</a>
</div>
</div>

Answer 1

在部分中添加另一个类 -

<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>

并放入css

.text-container{text-align: left;}

在column-format

的css中添加两行

.columns-format {
    display: inline-block;
    width: auto;
    float: left;
    text-align: center;
}

Answer 2

我建议您使用flexbox代替columns。

columns更多的意思是让文本和图片动态分布在一定数量的列中，而您的示例看起来更像3列，其内容应包含在每列中，columns不行。

要使图像/列不重叠，您可以给columns-format一个最小宽度（在下面的示例中），将图像大小设置为百分比，包裹列等等。

＆＃13;

＆＃13;

.columns {
  display: flex;
  justify-content: space-between;
}
.columns-format {
  display: inline-block;
  width: 30%;
  min-width: 300px;
}
.image-container {
  text-align: center;
}
.image-container a {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  transition: box-shadow 0.3s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.image-container a:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

＆＃13;

<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:</p>
    <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>
    <div class="image-container">
      <a target="_blank" href="images/stairwell.jpg">
        <img src="images/stairwell.jpg" width="250px" height="200px">
      </a>
    </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="image-container">
      <a target="_blank" href="images/flowers.jpg">
        <img src="images/flowers.jpg" width="250px" height="200px">
      </a>
    </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 class="image-container">
      <a target="_blank" href="images/lighting.jpg">
        <img src="images/lighting.jpg" width="250px" height="200px">
      </a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这个输出R你期待吗？

检查Link to Jsbin

中的输出

＆＃13;

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</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="image-container">
	<a target="_blank" href="images/stairwell.jpg">
		<img src="images/stairwell.jpg" width="250px" height="200px">
		</a>
</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="image-container">
	<a target="_blank" href="images/flowers.jpg">
		<img src="images/flowers.jpg" width="250px" height="200px">
		</a>
</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="image-container">
	<a target="_blank" href="images/lighting.jpg">
		<img src="images/lighting.jpg" width="250px" height="200px">
		</a>
</div>
</div>
</body>
</html>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 4

在内联块图像容器之前，您需要一个周围的div。像添加类

之类的东西

.centered{ 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>

Answer 5

只需将display: flex添加到.column-formats并提供flex-direction column就可以了。

.columns {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	column-gap: 20px;
}

.columns-format {
	display: flex;
	width: auto;
    flex-direction:column
}

.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: auto;
}

.image-container hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);

<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="image-container">
	<a target="_blank" href="images/stairwell.jpg">
		<img src="images/stairwell.jpg" width="250px" height="200px">
		</a>
</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="image-container">
	<a target="_blank" href="images/flowers.jpg">
		<img src="images/flowers.jpg" width="250px" height="200px">
		</a>
</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 class="image-container">
	<a target="_blank" href="images/lighting.jpg">
		<img src="images/lighting.jpg" width="250px" height="200px">
		</a>
</div>
</div>

</div>