Question

我的android项目正在webview中加载一个html文件，其中包含一个带有切片图像的表。加载webview时，图像与移动屏幕的左上角对齐。图像可以根据移动屏幕的宽度进行缩放。如何在屏幕内垂直居中显示图像？

代码：

 WebView browser = (WebView) actividad.findViewById(R.id.webView_map);
 browser.getSettings().setLoadWithOverviewMode(true);
 browser.getSettings().setUseWideViewPort(true);
 browser.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

 browser.getSettings().setBuiltInZoomControls(true);
 browser.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);

 browser.setPadding(0, 0, 0, 0);
 browser.setInitialScale(getScale());   
 browser.loadUrl(imageHtml);

 private final static int MAP_WIDTH = 2500;
 private int getScale(){
    Display display = ((WindowManager)  actividad.getSystemService(Context.WINDOW_SERVICE)).
        getDefaultDisplay();          
    DisplayMetrics dm = new DisplayMetrics();
    display.getMetrics(dm);

    Double val = Double.valueOf(dm.widthPixels)/Double.valueOf(MAP_WIDTH);
    val = val * 100d;
    return val.intValue();
  }

HTML：

 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="mapa.css" />
 </head>
 <body>
 <div class="wrapper">
 <table cellpadding="0" border="0" cellspacing="0">
<tr>
<td><img alt=" " src="mapa_general/mapa_general_0_0.png"  style=" border-width: 0px;"></td>
<td><img alt=" " src="mapa_general/mapa_general_0_1.png" style=" border-width: 0px;"></td>
</tr>
<tr>
<td><img alt=" " src="mapa_general/mapa_general_1_0.png" style=" border-width: 0px;"></td>
<td><img alt=" " src="mapa_general/mapa_general_1_1.png" style=" border-width: 0px;"></td>
</tr>
</table>
</div>
</body>
</html>

CSS：

body, html { 
 height: 100%; 
 width: 100%; 
}

body { 
  display: table; 
}

#wrapper { 
  display: table-cell; 
  vertical-align: middle;
}

Answer 1

试试这个

body {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-align: stretch;
    box-align: stretch;
    -webkit-box-direction: normal;
    box-direction: normal;
    -webkit-box-pack: center;
    box-pack: center;
}

#wrapper {
    -webkit-box-flex: 0;
    box-flex: 0;
    -webkit-box-ordinal-group: 1;
    box-ordinal-group: 1;
    text-align: center;
}

Android Webview在html表中垂直居中切片图像

1 个答案: