Căn element vào giữa vùng chứa

1. Tổng quan

  • Định nghĩa: Hướng dẫn cơ chế neo (anchor) và sử dụng hệ thống lưới (Grid/Layout) để đặt các phần tử vào đúng vị trí trung tâm của vùng chứa.
  • Lợi ích/Giá trị: Giúp các phần tử hiển thị cân đối và giữ đúng tỷ lệ thiết kế trên nhiều độ phân giải màn hình khác nhau.
  • Đối tượng sử dụng: Marketer, Designer.

2. Giải thích Thuật ngữ & Thông số

  • Vùng chứa (Container): Khu vực nội dung chia theo hàng (Row) và cột (Column) để neo các phần tử.
  • Trạm nối (Anchor): Điểm neo giúp cố định một cạnh của phần tử với lề của vùng chứa (Trái, phải, trên, dưới, trung tâm).

3. Điều kiện tiên quyết (Prerequisite)

4. Cơ chế hoạt động của Vùng chứa và Ô lưới

Các phần tử khi được kéo thả vào vùng chứa sẽ tự động được “neo” vào từng Cột/Hàng định sẵn dựa trên kích thước của chúng.

  • Trường hợp 1: Nếu Element nằm gọn trong Cột 1 và Hàng 1, thao tác căn giữa sẽ định tâm phần tử đó so với ranh giới của Cột 1 và Hàng 1.
  • Trường hợp 2: Nếu Element có kích thước lớn, chiếm cả Cột 1+2 và Hàng 1+2, thao tác căn giữa sẽ lấy trung tâm của toàn bộ khu vực 4 ô lưới này làm mốc.
  • Lựa chọn ô lưới: Click vào ô lưới để chọn vị trí, hoặc nhấn giữ và kéo chuột để chọn phần tử nằm trên nhiều ô lưới cùng lúc.

5. Các bước thực hiện căn giữa bằng Trạm nối (Anchor)

Khi bạn kéo một phần tử vào một ô lưới, “căn chỉnh” nghĩa là đặt nó vào vị trí ngay ngắn nhất trong ô đó thông qua Trạm nối.

  • Bước 1: Nhấp chọn phần tử cần căn chỉnh. Quan sát “Chấm đỏ” để biết vị trí neo hiện tại.
  • Bước 2: Trong bảng cài đặt thuộc tính (Properties), tìm mục Trạm nối.
  • Bước 3: Để neo phần tử vào vị trí trung tâm, nhấp chọn điểm neo Trung tâm (Center).
  • Mẹo tùy biến đa cạnh: Để neo phần tử dàn đều ra cả 2 cạnh đối diện (Trên-Dưới hoặc Trái-Phải), bạn hãy nhấn giữ phím Shift trên bàn phím và click chọn cạnh đối diện trên bảng Trạm nối.

6. Quy tắc vận hành

  • Khoảng cách lề (Margin) là khoảng cách được tính từ mép bên ngoài của phần tử cho đến trạm nối. Nếu bạn chỉnh Margin quá lớn, phần tử có thể bị đẩy lệch khỏi vị trí trung tâm.

7. Các câu hỏi thường gặp (FAQ)

  • Hỏi: Tại sao tôi chọn Trạm nối trung tâm nhưng phần tử vẫn bị lệch
    • Trả lời: Hãy kiểm tra phần tử của bạn đang chiếm dụng bao nhiêu ô lưới (Column/Row). Rất có thể kích thước phần tử đang bị tràn sang một ô lưới khác, khiến tâm của nó bị dịch chuyển.

8. Bước tiếp theo

N/A

image-zoom
© MOBIO 2022 v1.3 Powered by MOBIO
Back to Top