2015-06-21 3 views
3

Я новичок в html и css и изучаю HTML для манекенов.Горизонтально встроенный Google Doc?

Как бы то ни было, мне было интересно, как бы я сделал горизонтальное центрирование встроенного документа google.

<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

Вам нужно выбрать 'body', который находится внутри' iframe', а затем применить приведенный выше CSS к 'body' внутри' iframe'. Вы не можете выбрать 'body' с помощью CSS, но вы можете выбрать с помощью JavaScript/jQuery. –