May 13, 2024 | HTML
Hello Dev,
To vertically align content such as text, images, or divs in the middle using CSS, you can indeed utilize the display: table and display: table-cell properties. This method is particularly useful when you want to center content within a container both horizontally and vertically. Here's how you can achieve this:
HTML StructureFirst, let's define a simple HTML structure that includes a container and some content inside it that we want to center:
Read Also: How To Make Checkboxes Like a Radiobuttons in Jquery? index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Set Vertical Align Middle in Div Example -- ItErrorSolution.com</title>
<style>
.container {
display: table;
width: 100%; /* Adjust as needed */
height: 100vh; /* Full viewport height */
}
.content {
vertical-align: middle;
text-align: center; /* Center text horizontally */
background: green;
width: 500px;
background:green;
color:white;
height: 150px;
border:1px solid red;
display: table;
}
</style>
</head>
<body>
<h1>Set Vertical Align Middle in Div Example -- ItErrorSolution.com</h1>
<div class="container">
<div class="content">
<p>This is some text.</p>
<img src="your-image-source.jpg" alt="An image">
</div>
</div>
</body>
</html>
Output:
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"