How can I horizontally center 3 divs?
So, I have 3 maps that I am going to put in my projects internally and I need them to be fully centered horizontally. I have tried many things but none have worked so far.
Here is the code for the cards.
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
cursor: pointer;
}
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>
source to share
Using flexbox is easy. On the element that contains your divs, just add display: flex;
and justify-content: center;
:
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
cursor: pointer;
}
body {
display: flex;
justify-content: center;
}
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>
source to share
Just use flexbox. Make a container for the cards and put the display: flex; on it and then on justification-content: center to center them regardless of the size of the new container div
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
cursor: pointer;
}
.card-container {
display: flex;
justify-content: center;
}
<div class="card-container">
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>
</div>
source to share
Create a parent with text-align: center
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
cursor: pointer;
}
.parent {
text-align: center;
}
<div class="parent">
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>
</div>
source to share
Use the rules translateX
and left
to accommodate them.
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
cursor: pointer;
}
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>
source to share