Question

我尝试使用GWT创建一个非常简单的网页。我的实际网页看起来像这样：

--------------------------------
|          (menu fix)  LoginBtn|
|                              |
|           Menu bar           |
|                              |
--------------------------------

CSS文件：

.menu_fix {
width: 100%;
height: 10%;
margin-top: -150px;
position: absolute;
left: 50%;
top: 0;
margin: auto;
margin-left: -50%;}

.loginBtn {
float: right; }

.menubar {
margin: auto;
position: absolute;
top: 135px;
width: 20%;
left: 150px; }

Java文件：

public StartViewImpl() {
    VerticalPanel mainPanel = new VerticalPanel();
    mainPanel.add(createHeader());
    mainPanel.add(createMenuBar());

    Image widget = new Image("cat.jpg");
    widget.setPixelSize(400,400);
    widget.setStyleName("????");

    mainPanel.add(widget);
    handlerList = new HashMap<Widget, HandlerRegistration>();
    initWidget(mainPanel);
}

private FlowPanel createHeader() {
    FlowPanel fixHeaderPanel = new FlowPanel();
    fixHeaderPanel.setStyleName("menu_fix");
    Button loginBtn = new Button("Login");
    loginBtn.addStyleName("loginBtn");
    ...
    return fixHeaderPanel;
}

private HorizontalPanel createMenuBar() {
    menuPanel = new HorizontalPanel();
    menuPanel.addStyleName("menubar");
    ...
    return menuPanel;
}

在构造函数StartViewImpl中，我尝试添加图像。将图像添加到网页中心的正确css样式是什么？图像应显示在菜单栏下方。有GWT样本模板吗？我不知道如何在gwt项目中正确使用css样式。

最好的问候，克里斯

Answer 1

添加：

.image {
    margin: 0 auto;
}

widget.setStyleName("image");

或者，你可以这样做：

mainPanel.setCellHorizontalAlignment(widget, HasHorizontalAlignment.ALIGN_CENTER);

Answer 2

问题陈述：

将图像添加到网页的中心。图像应显示在菜单栏下方。

<强>解决方案：

试试这段代码。

爪哇：

widget.setStyleName("img");

CSS：

.img{
   margin-left: 50%;
   margin-top: 135px;
}

使用GWT为简单网页配置CSS

2 个答案: