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

我的android項目正在webview中加載一個包含切片圖像的表格的html文件。加載網頁視圖時，圖像與手機屏幕的左上角對齊。圖像可以根據手機屏幕的寬度進行縮放。如何垂直居中屏幕內的圖像？Android Webview在html表中垂直居中切片圖像

代碼：

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

來源

2012-12-20 nicBBB

試試這個

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

來源

2012-12-20 13:18:07 Kris

我忘了，不要用TA Bles :) – Kris

這對4.1之前的Android操作系統版本很好。 Android 4.1處理不同的webkit嗎？ – nicBBB

它也適用於android 2.3.5的htc願望 – Kris

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

回答

相關問題