Centering elements in CSS is a common requirement, but using the float property for horizontal centering can be tricky. While float is primarily used for wrapping text around images or aligning elements to the left or right, some developers explore creative ways to use it for centering. In this article, you will learn how to center a div in CSS using float with examples.
This property centers the element by using the two empty div elements and setting one div to the left and another to the right. Create the other div and place it between them; then, it adjusts itself to the available space. The floating elements on both the left and right sides will have equal width.
Table of Contents:
What is float in CSS?
The float property in CSS is used for positioning the elements from left or right. It is within the container, allowing other content, like text, to flow around it. It has values like left, right, none, and inherit.
How Do float: left and float: right Horizontally Center an Element?
The float: left and float: right properties can be used for horizontally centering an element. These properties won’t directly center the elements horizontally; they align the elements to the left or right of their container. For centering the elements, you can combine them with a wrapper container and use text-align: center or other techniques.
Example 1: Centering a Div Using Float
The float property in CSS moves elements to the left or right of their container, making the text and other inline elements flow around them.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Left and Right Example</title>
<style>
.container {
width: 50%;
background-color: white;
padding: 20px;
}
.left-align {
width: 200px;
float: left;
background-color: lightblue;
margin-right: 10px;
padding: 20px;
text-align: center;
}
.right-align {
width: 200px;
float: right;
background-color: lightcoral;
margin-left: 10px;
padding: 20px;
text-align: center;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="left-align">
This div is aligned to the left.
</div>
<div class="right-align">
This div is aligned to the right.
</div>
</body>
</html>
Output:
Explanation: The .container class styles the container with a width of 50% and padding of 20px. The left-align class aligns the element to be positioned at the left, and the right-align class aligns the element to be positioned at the right.
Start Your Web Development Journey Today
Professional Web Development Courses
Example 2: Centering the Image Using Float
You can use this float for positioning the element; the properties, such as float: right and float: left, align the image.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Images Example</title>
<style>
.container {
width: 80%;
background-color: white;
padding: 20px;
overflow: hidden;
text-align: center;
}
.left-image {
width: 500px;
float: left;
margin-right: 20px;
}
.right-image {
width: 500px;
float: right;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSQANxmZwHQgEis3h0jJuoIXb37m-UmjBNqg&s" class="left-image" alt="Left Image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSQANxmZwHQgEis3h0jJuoIXb37m-UmjBNqg&s" class="right-image" alt="Right Image">
</div>
</body>
</html>
Output:
Explanation: The code gives you the two images aligned to the left and right sides of the page. Properties like float: left and float: right are used to align the images on the left and right. You can also get images with the horizontally centered feature.
You can use this float for positioning the buttons; the properties such as float: right and float: left align the buttons to the center.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Buttons Example</title>
<style>
.container {
width: 50%;
background-color: white;
padding: 20px;
overflow: hidden;
}
.left-button {
float: left;
background-color: lightblue;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.right-button {
float: right;
background-color: lightcoral;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<button class="left-button">Left Button</button>
<button class="right-button">Right Button</button>
<div class="clear"></div>
</div>
</body>
</html>
Output:
Explanation: The code is used to create the button with the floating property. The float: left and float: right are used for the buttons to align the left and right sides of the page with the feature of horizontal centering in the button.
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
While the float property in CSS isn’t built for centering elements, creative use of positioning and transforms can provide a workaround. For responsive and maintainable layouts, CSS Flexbox or Grid are the modern alternatives. Still, understanding float behaviour helps when working with legacy code or email templates.
Alternative Methods to Horizontally Center the Element
CSS float to Horizontally Center Element – FAQs
Q1. How to center elements using float CSS?
You can use ‘float: left’ or ‘float: right’ combined with ‘margin: auto’, but float is not ideal for centering—better alternatives like Flexbox or CSS Grid provide more reliable alignment.
Q2. How to center a div in CSS using float?
A div can be centered using ‘float’ by setting it inside a parent container with a defined width and applying ‘margin: auto’, though using Flexbox or CSS Grid is a more effective approach.
Q3. How to wrap text around an image in CSS?
Use ‘float: left’ or ‘float: right’ on the image to allow text to wrap around it, or use Flexbox or CSS Grid for more structured layouts.
Q4. How can I wrap text in CSS?
Use ‘word-wrap: break-word’ or ‘overflow-wrap: break-word’ to ensure long words wrap properly within a container.
Q5. How to use the position property in CSS?
The ‘position’ property allows elements to be positioned using values like static, relative, absolute, fixed, or sticky, depending on the desired layout.