CSS с тегом объекта - PullRequest
       3

CSS с тегом объекта

2 голосов
/ 28 февраля 2012

Я пытаюсь центрировать файл pdf в середине моей веб-страницы, но он не позволяет мне устанавливать поля на 0 автоматически, как это делается для обычного контента.

Я могу добиться этого с помощью абсолютного позиционирования, но почему свойство обычного поля не работает?

<html>
<style>
#ob{
    width:800px;
    height:800px;
}
#wrapper{
    margin:0 auto;
}

</style>
</head>

<body>

<div id="wrapper">
<object id="ob" class="pdf" data="my_pdf_file.pdf" type="application/pdf">
Your browser does not support PDFs
</object>
</div>


</body>
</html>    

Ответы [ 6 ]

1 голос
/ 28 февраля 2012

Дайте обертку ширину, поэтому она не центрируется, я не знаю, что сравнивать в центре

#wrapper{
    margin:0 auto;
    width: 800px;
}
1 голос
/ 28 февраля 2012

Что бы вы ни пытались центрировать, используя технику полей, необходимо определить ширину.

Попробуйте установить ширину для оболочки или просто примените поле: от 0 px до # ob

0 голосов
/ 06 января 2014

Просто замените свой стиль тегом на этот, и он решит вашу проблему, для подробностей, пожалуйста, посмотрите комментарии, которые я написал внутри кода.

<style>
    #wrapper{
        width: 800px;   // It will set the width of the wraper
        margin: 0 auto;     // It will help the wrapper div to be centered of the document.
    }

    #ob{
        width: 100%;    // It will be streched upto the wrapper fixed width which is 800px
        height: 800px;
    }
</style>
0 голосов
/ 28 февраля 2012

Вы центрируете оболочку, которая будет иметь ширину 100%, поэтому уже отцентрирована.Переместите код поля к объекту и повторите попытку.

0 голосов
/ 28 февраля 2012

попробуйте это:

<div id="wrapper">
<center>
<object id="ob" class="pdf" data="my_pdf_file.pdf" type="application/pdf">
Your browser does not support PDFs
</object>
</center>
</div>
0 голосов
/ 28 февраля 2012

Использование

text-align:center;

Вот пример jsFiddle .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...