2010-12-08 9 views
6

Ich versuche, eine gwt-Anwendung in der Mitte der Seite zu zentrieren, habe ich Folgendes versucht.So zentrieren Sie eine gwt-Anwendung in der Mitte der Seite

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); 

     } 

Ich habe ein .center in meinem Stylesheet innerhalb der gwt-Anwendung, die Folgendes hat.

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

Aber das scheint nicht zu funktionieren.

+0

Nur um sicher zu sein. 'container' ist eine ID und' center' eine Klasse, was bedeutet, dass es '.center' im Stylesheet sein sollte. –

+0

Ja im gwt Stylesheet habe ich .center.Forget über Container wird es nicht mehr benutzt. Ich sollte meinen Code aktualisieren, über den ich jetzt mache. – james

Antwort

4

Sie erreichen können, wahrscheinlich versuchen;

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

Mit dieser Methode setzen Sie den Hauptteil Ihrer Anwendung in die Mitte. Und andere Widgets ersetzt, kommt in die Mitte, ohne Stil zu geben. –

+1

Das hat funktioniert. Danke! – james

0

über diesen Link gehen

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

Sie leicht

+0

public void onModuleLoad() { \t \t RootPanel rootPanel = RootPanel.get(); \t \t \t \t Image image = neues Bild ("images/board.png"); \t \t \t \t \t \t Flow fp = new Flow(); \t \t fp.add (Bild); \t \t fp.setStyleName ("center"); \t \t rootPanel.add (fp); \t \t \t} /// NEW CODE – james

+0

@james können Sie diesen Code auf Ihre wichtigste Frage hinzufügen, so dass es leicht sein wird – kobe

+0

sicher, was zu lesen habe ich es – james

0

nur fügen Sie diese in Ihrem CSS-Datei

body { margin: 0; Polsterung: 0; Textausrichtung: Mitte; }

.center { Rand: 0px auto; Breite: 480px; Textausrichtung: links; }

Verwandte Themen