Cách thiết lập căn chỉnh ngang (horizontal alignment) của phần tử với JavaScript

Thuộc tính cssFloat (tương ứng CSS float) dùng để đẩy phần tử sang trái hoặc phải, cho phép nội dung khác quây quanh. Trong JavaScript dùng cssFloat vì float là từ khóa dành riêng.

Ví dụ minh họa

Nhấn nút để đẩy ảnh sang phải, văn bản quây quanh bên trái:

<!DOCTYPE html>
<html>
<body>
  <img id="myID" src="https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" width="300" height="300">
  <p>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</p>
  <button type="button" onclick="display()">Căn chỉnh ngang</button>
  <script>
    function display() {
      document.getElementById("myID").style.cssFloat = "right";
    }
  </script>
</body>
</html>

Giá trị cssFloat

• left – Phần tử trôi sang trái
• right – Phần tử trôi sang phải
• none – Không float (mặc định)
• inline-start/end – Logic theo hướng viết (hiện đại)

Lưu ý: Sau khi float, dùng clear trên phần tử sau để ngắt quây quanh. Hiện nay thường dùng Flexbox hoặc Grid thay vì float cho layout.