CSS a paragraph of text is centered in the table with padding
Centering a Section of Text with Padding within a Table with CSS
Tables are a common layout element in web design. Sometimes we need to center text within a table and also have some padding around it. This article will show you how to achieve this effect using CSS.
Method 1: Using the text-align and padding properties
We can horizontally center text by setting the text-align property of a table cell to center, and use the padding property to set the padding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Text with Padding in Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td{
text-align: center;
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<tr>
<td>geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
In the example above, we horizontally center the text by setting the text-align property of the td element to center, and set the padding property to 10px.
Method 2: Using Flex Layout
Another method is to use flex layout, setting the cell as a flex container and using the justify-content and align-items properties to achieve text centering and padding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Text with Padding in Table using Flexbox</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<tr> <td>geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
In the example above, we set the display property of the td element to flex, then use the justify-content and align-items properties to center the text horizontally and vertically. We also set the padding property to 10px.
Method 3: Using Pseudo-elements
We can also use pseudo-elements to achieve text centering and padding effects. This method allows for style adjustments without changing the table structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Text with Padding in Table using Pseudo-elements</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td{
position: relative;
border: 1px solid #000;
}
td::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
span {
display: inline-block; vertical-align: middle;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td><span>geek-docs.com</span></td>
</tr>
</table>
</body>
</html>
Output:
In the example above, we set the position property of the td element to relative, then used the ::before pseudo-element to create a placeholder element. The text content was then set to inline-block and vertically centered. The padding property was also set to 10px to set the padding.
Through these three methods, we can achieve the effect of centering text within a table with padding. In actual projects, you can choose the appropriate method to adjust the style according to your specific needs.