Implementing this is quite simple with the use of CSS3 Display Flexbox, allowing for easy vertical and horizontal centering of Figures.
For detailed guidance on using CSS3 Flexbox, refer to this helpful Flexbox guide
To achieve this, adjust the main-testimonial-block to function as display: flex and manage its child Elements. You can specify a max-height or height for your Figures to prevent them from overflowing with a black Background, such as 110px
A Answer for your Question has been provided below:
.main-testimonial-block {
display: flex;
align-items: center; /* vertically centered */
justify-content: center; /* horizontally centered */
/* If you desire your Figures to be centrally positioned across the screen,
set a height in this class,
where your figures can be aligned within it.
e.g. height: 100vh for Fullscreen. */
height: 100vh;
}
Refer to the snippet below for a functional example and alternative centering method.
How to center your content (using modern flexbox methods):
.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;
}
/* Remaining CSS code truncated for brevity */
<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)
To center content without CSS, first apply text-align: center to your .main-testimonial-block to center the content. Then reset the float on all figures with the class .snip1359 and set them as display: inline-block to act like block Elements while adjusting their width accordingly.
The limitation of this method is that only horizontal centering is possible. Ensure to align the text on child Elements appropriately. Below is the CSS for this technique.
.main-testimonial-block {
display: block;
text-align: center;
}
.snip1359 {
float: none;
display: inline-block;
}
Suggestions
.snip1359 are floated but not cleared, leading to potential Layout issues. Clear floating elements to avoid this.- Consider optimizing your CSS for managing figure content heights, paddings, and margins dynamically, although this may require further exploration beyond the current topic.
- For mobile responsiveness, bear in mind that Users may access the site on smaller Devices.