How do i center things in this div - html

Question

Here is the jsfiddle
I want to center content inside div with class main-testimonial-block
I am able to center it using position: absolute;
left: 50%;
transform: translate(-50%);
But when I use this trick, the two boxes inside it, gets a line break. I want the linebreak, only when there is not enough space on the screen, i.e: on mobiles
.main-testimonial-block {}
.snip1359 {
font-family: 'Roboto', Arial, sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 200px;
max-width: 405px;
width: 100%;
color: #ffffff;
text-align: left;
line-height: 1.4em;
background-color: #1e1e1e;
padding-top: 120px;
}
.snip1359 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snip1359 img {
max-width: 100%;
vertical-align: top;
opacity: 0.85;
}
.snip1359 figcaption {
width: 100%;
background-color: #141414;
padding: 25px;
position: relative;
}
.snip1359 figcaption:before {
position: absolute;
content: '';
bottom: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 55px 0 0 400px;
border-color: transparent transparent transparent #141414;
}
.snip1359 .profile {
border-radius: 50%;
position: absolute;
bottom: 100%;
left: 25px;
z-index: 1;
max-width: 90px;
opacity: 1;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1359 h3 {
font-size: 1.3em;
margin: 25px;
font-weight: 300;
position: absolute;
top: 0;
right: 0;
text-align: right;
}
.snip1359 h3 span {
display: block;
font-size: 0.65em;
color: #2980b9;
}
.snip1359 blockquote {
margin: 0 0 10px;
padding: 0 0 30px;
letter-spacing: 1px;
opacity: 0.8;
font-style: italic;
font-weight: 300;
}
.snip1359 blockquote:after {
font-family: 'FontAwesome';
content: "\201C";
position: absolute;
font-size: 180px;
line-height: 1em;
color: #212121;
font-style: normal;
content: "\201D";
right: 20px;
bottom: -105px;
}
<div class="main-testimonial-block">
<figure class="snip1359">
<figcaption>
<blockquote>Test message, works!</blockquote>
</figcaption>
<h3>Kamal Chhirang<span>BCA III</span></h3>
</figure>
</style>
<figure class="snip1359">
<figcaption>
<blockquote>asfsfs</blockquote>
</figcaption>
<h3>test test<span>testtttt</span></h3>
</figure>
</div>

Answer 1

You can accomplish this pretty easy using CSS3 Display Flexbox.
For even centering the Figures in Vertical and Horizontal direction.
Here is a pretty good Guide for CSS3 Flexbox
All you need is to modify the main-testimonial-block to act as display: flex and handle its child Elements. You may set a max-height or height for your Figures so they don't overgrow with a black Background, e.g. 110px
I will provide you first with a Answer for your Question:
.main-testimonial-block {
display: flex;
align-items: center; /* centers vertically */
justify-content: center; /* centers horizontally */
/* if you want your Figures to be centered all over the screen
vertically set a height for this class,
your figures can be centered in it.
e.g. height: 100vh for Fullscreen. */
height: 100vh;
}
See below snipped for working copy and alternative centering method.
How to center your content (the modern way using flexbox):
.main-testimonial-block {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.snip1359 {
font-family: 'Roboto', Arial, sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 200px;
max-width: 405px;
width: 100%;
color: #ffffff;
text-align: left;
line-height: 1.4em;
background-color: #1e1e1e;
padding-top: 120px;
}
.snip1359 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snip1359 img {
max-width: 100%;
vertical-align: top;
opacity: 0.85;
}
.snip1359 figcaption {
width: 100%;
background-color: #141414;
padding: 25px;
position: relative;
}
.snip1359 figcaption:before {
position: absolute;
content: '';
bottom: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 55px 0 0 400px;
border-color: transparent transparent transparent #141414;
}
.snip1359 .profile {
border-radius: 50%;
position: absolute;
bottom: 100%;
left: 25px;
z-index: 1;
max-width: 90px;
opacity: 1;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1359 h3 {
font-size: 1.3em;
margin: 25px;
font-weight: 300;
position: absolute;
top: 0;
right: 0;
text-align: right;
}
.snip1359 h3 span {
display: block;
font-size: 0.65em;
color: #2980b9;
}
.snip1359 blockquote {
margin: 0 0 10px;
padding: 0 0 30px;
letter-spacing: 1px;
opacity: 0.8;
font-style: italic;
font-weight: 300;
}
.snip1359 blockquote:after {
font-family: 'FontAwesome';
content: "\201C";
position: absolute;
font-size: 180px;
line-height: 1em;
color: #212121;
font-style: normal;
content: "\201D";
right: 20px;
bottom: -105px;
}
<div class="main-testimonial-block">
<figure class="snip1359">
<figcaption>
<blockquote>Test message, works!</blockquote>
</figcaption>
<h3>Kamal Chhirang<span>BCA III</span></h3>
</figure>
</style>
<figure class="snip1359">
<figcaption>
<blockquote>asfsfs</blockquote>
</figcaption>
<h3>test test<span>testtttt</span></h3>
</figure>
</div>
Centering Elements (without css)
First you set text-align: center your .main-testimonial-block to allow the content to be centered. Then you reset the float on the figures with class .snip1359 and set them as display: inline-block. This allows them to behave like block Elements but just take the width as they need.
Downside of this method is, you can only center horizontally. And you may set the text align on the child Elements accordingly. Here is the CSS for this method.
.main-testimonial-block {
display: block;
text-align: center;
}
.snip1359 {
float: none;
display: inline-block;
}
Suggestion
.snip1359 are floated, but are never cleared. You should clear your floating elements to predict Layout issues.
I would change your CSS for handling the content of your figures to handle height, padding, margins properly dynamic, but this is out of topic.
Mobile handling? Take in mind that Users may visit the site in small Devices.

Answer 2

You just need to add margin: 0 auto; to the container as well as the widths.
.main-testimonial-block {
margin: 0 auto;
min-width: 200px;
max-width: 405px;
width: 100%;
}
Also, you have a random </style> in your html that you need to remove.