Question

如果在Windows窗体中WebBrowser控件，如何将图像放置在文档的中心（水平和垂直）？

以下代码适用于JSFiddle（https://jsfiddle.net/3es05myx/），但它在WebBrowser控件中不起作用：

this.webBrowser.DocumentText =
                "<!DOCTYPE HTML>" +
                "<html>" +
                "<head>" +
                "<style type=\"text/css\">" +
                "img.center {" +
                    "position: absolute;" +
                    "top: 0; bottom:0; left: 0; right:0;" +
                    "margin: auto;" +
                "}" +
                "</style>" +
                "</head>" +
                "<body>" +
                "<img class=\"center\" src=\"https://d1u2uhea8ugy8e.cloudfront.net/info/static/img/globals/loading.gif\">" +
                "</body>" +
                "</html>";

它给了我以下结果：

enter image description here

这是预期的行为：

enter image description here

为什么呢？我究竟做错了什么？我该如何解决？

提前致谢。

Answer 1

您应该使用div并将该中心类赋予该div而不是img标记。

查看此示例。

＆＃13;

.center{
  width:100%; 
  text-align:center;   
  vertical-align:middle;
  height:300px;
  padding-top:130px;
}

＆＃13;

<div class='center'>
   <img src="https://d1u2uhea8ugy8e.cloudfront.net/info/static/img/globals/loading.gif">
<div>

＆＃13;

Answer 2

img.center {
    position: absolute;
    top: 50%;
    margin-top: -25px; //half of image height
    left: 50%;
    margin-left: -25px; //half of image width
}

尝试使用此代码。

如何在Windows窗体中将图像放在文档的中心

2 个答案: