2015-06-21 45 views
3

我是新来的HTML和CSS,并已通过HTML学习傻瓜。水平居中嵌入谷歌文档?

无论如何,我想知道如何去横向对齐嵌入式谷歌文档。

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head> 
<body bgcolor="#414141"> 
<title>Rules Page</title> 
    <div class="center"> 
     <iframe width='85%' height='100%' src="https://docs.google.com/document/d/1G1xhqhSK2Ge8diyXELZ3cNvFJj-5wK-0_1VMjCfQR_I/pub?embedded=true"> </iframe> 
    </div> 
</body> 

div#iframe-wrapper iframe { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    right: 100px; 
    height: 100%; 
    width: 100%; 
} 

回答

0

这其中的方法之一做

.center iframe { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
}
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
 
</head> 
 
<body bgcolor="#414141"> 
 
<title>Rules Page</title> 
 
    <div class="center"> 
 
     <iframe width='85%' height='100%' src="https://docs.google.com/document/d/1G1xhqhSK2Ge8diyXELZ3cNvFJj-5wK-0_1VMjCfQR_I/pub?embedded=true"> </iframe> 
 
    </div> 
 
</body>

+0

谢谢,但仍然不居中。作为参考,这里是http://evilmelonrp.com/texastestrules/我的文档在网页中。 –

+0

您需要选择'iframe'内的'body',然后将上面给出的CSS应用到'iframe'内的'body'。你不能使用CSS选择'body',但你可以选择使用JavaScript/jQuery。 – 2015-06-21 03:14:11