CSS float to Horizontally Center Element

You can use the float property to center the element horizontally. This property is used for positioning the elements on the left or right side of the container and also allows the inline elements like text to wrap around them. You can use a combination of float: left and float: right to center the text horizontally.

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.

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 them. It has the 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

Explore Program

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.

Example 3: Centering a Button Using Float

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 the horizontal centering in the button.

Get 100% Hike!

Master Most in Demand Skills Now!

Conclusion

You can use the float property to center the element horizontally. Combining properties like float: left and float: right allows you to position the elements, such as div, image, and button, to the center. Therefore, you can make your webpage look well-structured.