Как сжимать всю страницу до центра, когда она уменьшена?

-1

Если страница уменьшена, как я могу сжать веб-страницу и весь ее контент в центр? Это до масштабирования. Это после уменьшения изображения Как сжимать всю страницу до центра, когда она уменьшена?

Как уменьшить до центра страницы в то время как уменьшение масштаба?

код им с помощью является

<title>Demo</title> 
<head>This is a demo</head> 
<style> 
#my-div{ 

    margin-left: auto; 
    margin-right: auto; 

    width: 80%; 
    height: 50%; 
} 
#nav 
{ 
background-color: red; 
float: left; 
width: 200px; 
position:relative; 

} 

#detail 
{ 
background-color: green; 
float : right; 
width: 800px; 
position:relative; 
} 

div.testDetail 
{ 
margin-top:10px; 
margin-left:20px; 
margin-right:20px; 
margin-bottom:10px; 
} 

#container 
{ 
width:1000px; 
position:relative; 
} 
</style> 

<hr> 
<body style="background-color:blue";> 


<div id="my-div"> 
<div id="container"> 
<div id="nav"> 
    <ul>Tests</ul> 
</div> 
<div id="detail"> 
    <div class="testDetail"> 
     <image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/> 
     <image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/> 
     <image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/> 
     <image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/> 
     <h3>Title</h3> 
     <p>Testing</p> 
    </div> 
    </div> 
    <hr> 
</div> 
</div> 
<body>

источник

2016-05-04 Ramya Selvaraj

Просьба привести пример кода. Вероятно, вы можете добавить «margin: auto», чтобы убедиться, что контент центрирован. – phpheini

укажите пример кода и то, что вы пробовали до сих пор. – LorDex

Да, я поделился этим примером кода –

Может быть, вы можете поделиться пример кода?

Вы можете попробовать использовать CSS свойство:

margin:0 auto; для центровки вашего блока (возможно, тело в вашем случае).

С уважением.

[Редактировать]

Сначала вы должны ошибка в вашем HTML:

близко тело тега правильно
удалить ';' в открытом теге тела
обертки код с HTML тегом
Добавить доктайп (html5 используется в моем коде) стиль
пут в головной метке
пут заголовка внутри головы тега
удалить в головной метке

Просьба также отступать.

[Редактировать]

Здесь код работает после коррекции, я использую процент вместо измерения пикселей, наслаждайтесь:

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Demo</title> 
     <style> 
      body{ 
       margin: 0 auto; 
       width: 100%; 
      } 

      #my-div{ 
       margin: 0 auto; 
       width: 80%; 
       height: 50%; 
      } 

      #nav 
      { 
       background-color: red; 
       float: left; 
       width: 20%; 
       position:relative; 

      } 

      #detail 
      { 
       background-color: green; 
       float : right; 
       width: 80% 
       position:relative; 
      } 

      div.testDetail 
      { 
       margin-top:10px; 
       margin-left:20px; 
       margin-right:20px; 
       margin-bottom:10px; 
      } 

      #container 
      { 
       width:auto; 
       position:relative; 
      } 
     </style> 
    </head> 
    <body style="background-color:blue"> 
     <div id="my-div"> 
      <div id="container"> 
       <div id="nav"> 
        <ul>Tests</ul> 
       </div> 
       <div id="detail"> 
        <div class="testDetail"> 
         <image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/> 
         <image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/> 
         <image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/> 
         <image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/> 
         <h3>Title</h3> 
         <p>Testing</p> 
        </div> 
       </div> 
       <hr> 
      </div> 
     </div> 
    </body> 
</html>

источник

2016-05-04 12:48:17

Да, я поделился этим кодом –

Вы должны использовать самозагрузки рамки в CSS

источник

2016-05-04 12:53:05

Вот ваше решение: https://jsfiddle.net/xkzomtvd/2/

Сохраните всю страницу в главном div и примените класс на этом fo г Пример:

все содержание здесь

отдавания стиль к этому классу:

.wrapper {

margin:0 auto; 
max-width:400px; /* required width fixed or percentage */ 
background:red;

}

источник

2016-05-04 12:55:23

Вы фактически центрирования страницу, это просто не очевидно немедленно. Причина заключается в ширине 80% в элементе # my-div, тогда как все их дети находятся в контейнере размером 1000 пикселей.

Это позволит решить вашу проблему:

#my-div{ 
    width: 1000px; 
}

Вы можете использовать max-width в качестве альтернативы, но для примера, там действительно не повод.

источник

2016-05-04 12:58:12 TheThirdMan

Как сжимать всю страницу до центра, когда она уменьшена?

ответ

Смежные вопросы