How do you center a container inside of a column? - html

Question

I can't figure out how to center my image containers inside of my columns. Also for some reason the middle picture does not display even though everything is set up exactly how the other two are, is there some reason this is occurring?
Also, for whatever reason my columns do not format correctly when using google chrome. I thought the -webkit- was suppose to fix this?
.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

May I suggest you use flexbox instead of columns.
columns is more meant to make texts and images to dynamically spread over a certain amount of columns and your sample looks more as 3 columns that should have its content contained within each column, which columns does not do.
To make your images/columns not overlap, you either give the columns-format a minimum width (in below sample), set the image size to percent, wrap the columns, etc.
.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>

Answer 2

Add another class in section -
<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>
and put css
.text-container{text-align: left;}
add two line in css of columns-format
.columns-format {
display: inline-block;
width: auto;
float: left;
text-align: center;
}

Answer 3

Is this output R u expecting?
check the output in 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 4

You need a surrounding div around before your inline-block image container. Something like adding the 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 5

just add display: flex to .column-formats and give flex-direction column and you are good to go
.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>