Làm cách nào để tôi có thể căn giữa phần tử với GWT?

Question

Có lẽ tôi đã không tìm kiếm đúng cách nhưng tôi không thể tìm ra cho cuộc sống của tôi làm thế nào để trung tâm một phần tử bằng cách sử dụng Bảng bố cục GWT.

Tôi đang sử dụng UiBinder và tôi đã thử tất cả các bảng triển khai HasVerticalAlignment (DockPanel, HorizontalPanel, VerticalPanel). Không ai trong số họ dường như có bất kỳ tác động nào từ việc đặt căn chỉnh theo chiều dọc (hoặc thậm chí là ngang). Tôi đã đảm bảo rằng họ đang lấy chiều rộng và chiều cao 100%, đã kiểm tra bố cục DOM kết quả từ trình duyệt của tôi và dường như không có gì thay đổi từ các thuộc tính đó.

thích hợp chiết xuất UiBinder (với các yếu tố docklayout thêm bỏ qua):

<g:DockLayoutPanel> 
<g:center> 
    <g:HorizontalPanel width="100%" height="100%" > 
     <g:FlexTable ui:field="homeData" /> 
    </g:HorizontalPanel> 
</g:center> 
</g:DockLayoutPanel> 

Việc sửa chữa nhanh chóng và dơ bẩn tôi đã tìm ra là để tạo của riêng tôi "CenterPanel" phụ tùng mà cơ bản là một wrapper quanh một HTMLPanel với một bảng HTML với một ô valign = "trung bình". Tuy nhiên, điều này về cơ bản cảm thấy giống như một sự trở lại cho các vấn đề trung tâm bố trí css cổ điển. Chắc chắn GWT có cái gì đó để làm điều này mà tôi đã hoàn toàn bỏ qua?

Answer 1

Bạn đã thử đặt width nhỏ hơn 100% ... tôi cảm thấy chiều rộng HorizontalPanel trở thành 100% ... do đó, nó chiếm toàn bộ DockLayoutPanel và do đó, FlexTable có thể bị căn trái.

Answer 2

Định tâm một mặt hàng có thể được thực hiện với một yếu tố tế bào như thế này:

<g:HorizontalPanel width="100%" height="100%"> 
<g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE"> 
    <g:Label>Hello Center</g:Label> 
</g:cell> 
</g:HorizontalPanel> 

Answer 3

Bạn có thể sử dụng styleName thuộc tính trong thành phần của bạn. Ví dụ:

<g:DockLayoutPanel> 
<g:center> 
    <g:HorizontalPanel width="100%" height="100%" > 
     <g:FlexTable ui:field="homeData" styleName="verticalAlign"/> 
    </g:HorizontalPanel> 
</g:center> 
</g:DockLayoutPanel> 

và có

.verticalAlign{ 
vertical-align: middle; 
} 

trong style.css của bạn