如何使容器在列内居中？

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

你期待这个输出吗？

检查 Link to Jsbin

中的输出

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

.columns-format {
   text-align:center;
  margin: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;
    text-align:center;
}

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

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

Answer 2

在 -

部分再添加一个 class

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

在 columns-format

的 css 中添加两行

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

Answer 3

您需要在行内块图像容器之前环绕 div。比如添加 class

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

只需将 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>

Answer 5

我可以建议您使用 flexbox 而不是 columns。

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

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

.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);
}

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

如何使容器在列内居中？

How do you center a container inside of a column?

html

css

css-multicolumn-layout