How to Center Floated Elements With CSS
CSS is used to style how the HTML elements look on the screens and control multiple layouts of web pages at once. This article will discuss the CSS float and center properties.
Center Floated Elements With CSS
The CSS float property is utilized with positioning and formatting content of the HTML document. As standard, float properties have only four values: left, right, none , inherit.
The left and right values will float elements to the respective left and right of the container.
The none value is used so that elements do not float. Finally, the inherit value makes the property inherit the float value of its parent.
We cannot use the center value with float elements. So, we will explore methods to center float elements in this article.
Method 1 to Center Floated Elements With CSS
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<link rel="stylesheet" href="style1.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>CSS float center</h1>
<div class="container">
<div class="float_center">
<ul>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
</ul>
</div>
</div>
</body>
</html>
In the above example, an HTML container class is made as a first step; inside that, another class is called float_center. We can add content or elements we want to float and center within both classes.
.container{
border: 1px solid red;
float: left;
position: relative;
left: 40%;
}
After that, CSS properties should be added to the container class. The above CSS code puts the float property and sets the value as left to make a container class change the width depending on the content.
We can add a border property around the elements. Also, the position should be relative, which means the elements are placed relative to their normal position.
The left property will lead it to move out of its normal position.
In this example, we have set a left property to a 40% value so that the content will shift 40% of its normal position.
As a result of the CSS code, we can get the above output. At a glance, we can see it’s centered left edge of the container.
The float element is already centered, but we should add the following CSS code to make it successful.
.container{
float: left;
position: relative;
left: 50%;
}
.float_center{
border: 1px solid red;
text-align: center;
background-color: bisque;
padding-right: 20px;
font-size: 25px;
margin-top: 50px;
float: left;
position: relative;
left:-50% ;
}
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>CSS float center</h1>
<div class="container">
<div class="float_center">
<ul>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
</ul>
</div>
</div>
</body>
</html>
In this code, we added styles for the float_center class. We should set the float property to the left value.
The position should be relative to a parent class. The left property should be -50% to center the floated elements.
Other than that, we can style the floated content using properties like border, text-align, background-color, padding, font-size, and margin properties. Those properties can define a designer’s needs.
Output:
This is the final result of the above float-center example. Similarly, we can adjust floated elements to the center using the above code.
Method 2 to Center Floated Elements With CSS
Considering another use of the float-center method, we can identify pagination. It used to apply to websites that have a lot of pages.
When creating pagination, we frequently use the float property to align. It matters how pagination can be centered using the float property.
To solve this, we can use the following CSS properties and values.
Example Code:
<!DOCTYPE html>
<head>
<title>Pagination</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2 style="text-align: center;">Float center pagination</h2>
<div class="center">
<div class="pagination">
<a href="#">«
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">»</a>
</div>
</div>
</body
This is the HTML code that has two classes, which are center and pagination. In this HTML code, we set five href elements with the links of each page.
Considering the above consequence, we can see that the pagination elements are not centered or floated. Using the following CSS code, we can set pagination float and centered.
.center{
text-align: center;
}
.pagination{
display: inline-block;
margin: 50px;
}
.pagination a{
color: black;
float: left;
padding: 9px 18px;
text-decoration: none;
border: 1px solid black;
border-radius: 5px;
background-color: #efeded;
margin: 0 4px;
}
.pagination a:hover{
background-color: #7d656f;
}
We can set a text-align property to the value center to make the center the pagination. Usually, pagination can be placed beside each element using the float property.
As you can see, the above code’s pagination class is displayed as an inline block and set margin to 50 pixels.
Within the pagination class of the HTML code, we defined seven href elements. In the CSS code, we created a pagination a selector to style those href elements.
The float property is mainly set to the left value to place the pagination element side by side.
The color property defined the font color of the pagination elements. The padding property creates space within the elements and their borders, and the border-radius property rounds the border corners.
The background-color, margin, text-decoration, and border properties used to style href elements. Finally, the hover property is added to the pagination elements changing the background color.
We can get the following float-center pagination help with the above CSS code.
The above two methods can be used to center floated elements. The first method is capable of any scenario that owns floated elements.
The second one can create all kinds of paginations.
Alternative Ways to Center Floated Elements
It is highly recommended not to use the float property to center single-line text. Apply text-align:center on the containing block.
Also, we can center a block or element by simply setting the left and right margins to similar values. If the block has clear width, we can set the right and left margins to the auto value.
Conclusion
This article considers how to center floated blocks or elements in CSS. We have mentioned two methods that apply to any floated element or block.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.