Question

我是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%;
}

Answer 1

这是其中一种方法

＆＃13;

.center iframe {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

＆＃13;

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

＆＃13;

水平居中嵌入谷歌文档？

1 个答案: