2010-12-08 33 views
6

Tôi đang cố gắng căn giữa ứng dụng gwt ở giữa trang, tôi đã thử cách sau.Cách căn giữa ứng dụng gwt ở giữa trang

public void onModuleLoad() { 
      RootPanel rootPanel = RootPanel.get(); 

      Image image = new Image("images/board.png"); 


      FlowPanel fp = new FlowPanel(); 

      fp.add(image); 
      fp.setStyleName("center"); 
      rootPanel.add(fp); 

     } 

Tôi có một .center trong biểu định kiểu trong ứng dụng gwt có nội dung sau.

.center{ 
    margin: 0px auto; 
    width: 480px; 
} 

Nhưng điều này có vẻ không hoạt động.

+0

Chỉ cần chắc chắn. 'container' là một id và' center' một lớp, có nghĩa là nó phải là '.center' trong biểu định kiểu .... –

+0

Có trong biểu định kiểu gwt mà tôi có .center.Forget về vùng chứa nó không còn được sử dụng nữa. Tôi nên cập nhật mã của mình ở trên mà tôi sẽ làm ngay bây giờ. – james

Trả lời

4

Bạn có thể thử;

HTML;

<head> 
     <style type="text/css"> 
    div#container 
{ 
margin-left: auto; 
margin-right: auto; 
width:480px; 
} 
     </style> 

<script language="javascript" src="com.mycompany.project.TEST/com.mycompany.project.TEST.nocache.js"></script> 

</head> 

<body> 
<div id="container" align="center"> 


</div> 
</body> 

onmoduleLoad;

public void onModuleLoad() { 
     RootPanel rootPanel = RootPanel.get("container"); 

     Image image = new Image("images/board.png"); 


     FlowPanel fp = new FlowPanel(); 

     fp.add(image); 
     fp.setStyleName("center"); 
     rootPanel.add(fp); 

    } 
+0

Với phương pháp này, bạn đặt phần chính của ứng dụng vào giữa. Và các vật dụng khác được thay thế, đến trung tâm mà không đưa ra phong cách. –

+1

Điều này đã hiệu quả! – james

0

đi qua liên kết này

http://phrogz.net/css/vertical-align/index.html

bạn có thể đạt được một cách dễ dàng

+0

void công khai onModuleLoad() { \t \t RootPanel rootPanel = RootPanel.get(); \t \t \t \t Image image = new Image ("images/board.png"); \t \t \t \t \t \t FlowPanel fp = new FlowPanel(); \t \t fp.add (hình ảnh); \t \t fp.setStyleName ("center"); \t \t rootPanel.add (fp); \t \t \t} /// MỚI MÃ – james

+0

@ James bạn có thể thêm mã này vào câu hỏi chính của bạn, do đó nó sẽ được dễ dàng để đọc – kobe

+0

điều chắc chắn tôi đã thêm nó – james

0

chỉ cần thêm này trong file css của bạn

body { margin: 0; padding: 0; căn chỉnh văn bản: trung tâm; }

.center { lề: 0px tự động; chiều rộng: 480px; căn chỉnh văn bản: bên trái; }

Các vấn đề liên quan