как автоцентрировать миниатюры для всех размеров экрана

body{ 
    width:auto; 
    color:white; 
    font-size:15px; 
    width:100%; 
    max-width:1980px; 
    min-width:334px;  
    margin:0px auto; 
}

Это мой код. Мне нужны эскизы, чтобы быть в центре для всех разрешений экрана. Но я не могу этого сделать. Я даже попробовал тег. Это тоже не сработало. Что мне делать?как автоцентрировать миниатюры для всех размеров экрана

источник

2012-06-16 showbiz

, что ваш браузер? если вы должны добавить 'DOCTYPE' – seyed

Вы должны показать свой соответствующий' html', для начала; и в идеале показать живую демо для нас, чтобы работать с [JS Fiddle] (http://jsfiddle.net/), [JS Bin] (http://jsbin.com/) или подобным, что наглядно демонстрирует вашу проблему , –

посмотреть URL: http://jsfiddle.net/DyRS4/2/

HTML:

<div id="my-div">my div</div>

CSS:

div#my-div{ 
    margin:0px auto; 
    background: red; 
    width: 100px; 
    height: 100px; 
}

источник

2012-06-16 19:01:25 seyed

, который работает на определенный размер экрана, но я спросил что-то для всех размеров экрана, если это возможно. Я хочу, чтобы большие пальцы всплыли и все еще в центре. – showbiz

Можете ли вы указать, для какого размера экрана он не работает. –

CSS

.picture_area { width:/*width of picture area you want in pixels*/; 
       height: auto; 
       min-width:/*smallest size of window in pixels that does not push pics left*/;} 
       margin-left: auto; margin-right: auto; } 
.navigation_area { margin-bottom: 5%; }

HTML

<div class="navigation_area"> 
     <!--Nav code here--> 
    </div> 


    <div class="picture_area"> 
      <!--All your image code here--> 
    </div>

Вы хотели бы создать специальный DIV для области, где вы положили свои эскизы. Во-первых
вам необходимо установить днища поля вашей навигационной панели, чтобы они не перекрывали друг друга с вашими фотографиями. Затем определите ширину области эскизов с пикселями. Например, `width: 500px; затем установите атрибут min-width на минимальный размер, который не будет удалять изображения. Например, min-width: 500px ;. Затем, чтобы центрировать его на странице, установите margin-left и margin-right для области изображения в auto.

источник

2012-06-16 20:17:00 DrinkJavaCodeJava

Используйте следующие компоненты:

высота: 100% для HTML тега, бирка тела, контейнер и пустой элемент-заполнитель
дисплей: встроенный блок; и vertical-align: средний для контента и заполнителя для вертикального центра контента, который имеет неопределенную высоту в браузерах.
Элемент-заполнитель имеет высоту 100%, чтобы поддерживать линию линии, так что вертикальное выравнивание: среднее имеет желаемый эффект.
контейнер с фиксированной шириной для обертывания изображений.
display: inline для содержимого div и text-align center для контейнера div для горизонтального центрирования контента, который имеет неопределенную ширину в браузерах.

Объединить оба методы вертикального выравнивания и выравнивание текста, чтобы создать центрированную галерею изображения:

<!doctype html> 
 
    <html> 
 
    <head> 
 
    <title>Centered Image Gallery</title> 
 
    <style type="text/css"> 
 
    html, body, .container, .placeholder { height: 100%;} 
 
    
 
    img { width:16px; height:16px; margin-left: 20px; margin-top: 10px; } 
 
    
 
    .container { text-align:center; } 
 
    
 
    /* Use width of less than 100% for Firefox and Webkit */ 
 
    .wrapper { width: 50%; } 
 
    
 
    .placeholder, .wrapper, .content { vertical-align: middle; } 
 
    
 
    /* Use inline-block for wrapper and placeholder */ 
 
    .placeholder, .wrapper { display: inline-block; } 
 
    
 
    .fixed { min-width: 1px; } 
 
    
 
    .content { display:inline; } 
 
    
 
    @media, 
 
    { 
 
    .wrapper { display:inline; } 
 
    } 
 
    </style> 
 
    
 
    </head> 
 
     <body> 
 
     <div class="container"> 
 
     <div class="content"> 
 
      <div class="wrapper"> 
 
       <div class="fixed"> 
 
       <img src="http://microsoft.com/favicon.ico"> 
 
       <img src="http://mozdev.org/favicon.ico"> 
 
       <img src="http://webkit.org/favicon.ico"> 
 
       <img src="https://vivaldi.com/favicon.ico"> 
 
       <img src="http://www.srware.net/favicon.ico"> 
 
       <img src="http://build.chromium.org/favicon.ico"> 
 
       <img src="http://www.apple.com/favicon.ico"> 
 
       <img src="http://opera.com/favicon.ico"> 
 
       <img src="http://microsoft.com/favicon.ico"> 
 
       <img src="http://mozdev.org/favicon.ico"> 
 
       <img src="http://webkit.org/favicon.ico"> 
 
       <img src="https://vivaldi.com/favicon.ico"> 
 
       <img src="http://www.srware.net/favicon.ico"> 
 
       <img src="http://build.chromium.org/favicon.ico"> 
 
       <img src="http://www.apple.com/favicon.ico"> 
 
       <img src="http://opera.com/favicon.ico"> 
 
       <img src="http://mozdev.org/favicon.ico"> 
 
       <img src="http://webkit.org/favicon.ico"> 
 
       <img src="https://vivaldi.com/favicon.ico"> 
 
       <img src="http://www.srware.net/favicon.ico"> 
 
       <img src="http://build.chromium.org/favicon.ico"> 
 
       <img src="http://www.apple.com/favicon.ico"> 
 
       <img src="http://opera.com/favicon.ico"> 
 
       <img src="http://mozdev.org/favicon.ico"> 
 
       <img src="http://webkit.org/favicon.ico"> 
 
       <img src="https://vivaldi.com/favicon.ico"> 
 
       <img src="http://www.srware.net/favicon.ico"> 
 
       <img src="http://build.chromium.org/favicon.ico"> 
 
       <img src="http://www.apple.com/favicon.ico"> 
 
       <img src="http://opera.com/favicon.ico"> 
 
       <img src="http://mozdev.org/favicon.ico"> 
 
       <img src="http://webkit.org/favicon.ico"> 
 
       <img src="https://vivaldi.com/favicon.ico"> 
 
       <img src="http://www.srware.net/favicon.ico"> 
 
       <img src="http://build.chromium.org/favicon.ico"> 
 
       <img src="http://www.apple.com/favicon.ico"> 
 
       <img src="http://opera.com/favicon.ico"> 
 
       <img src="http://mozdev.org/favicon.ico"> 
 
       <img src="http://webkit.org/favicon.ico"> 
 
       <img src="https://vivaldi.com/favicon.ico"> 
 
       <img src="http://www.srware.net/favicon.ico"> 
 
       <img src="http://build.chromium.org/favicon.ico"> 
 
       <img src="http://www.apple.com/favicon.ico"> 
 
       <img src="http://opera.com/favicon.ico"> 
 
       <img src="http://mozdev.org/favicon.ico"> 
 
       <img src="http://webkit.org/favicon.ico"> 
 
       <img src="https://vivaldi.com/favicon.ico"> 
 
       <img src="http://www.srware.net/favicon.ico"> 
 
       <img src="http://build.chromium.org/favicon.ico"> 
 
       <img src="http://www.apple.com/favicon.ico"> 
 
       <img src="http://opera.com/favicon.ico"> 
 
       <img src="http://mozdev.org/favicon.ico"> 
 
       <img src="http://webkit.org/favicon.ico"> 
 
       <img src="https://vivaldi.com/favicon.ico"> 
 
       <img src="http://www.srware.net/favicon.ico"> 
 
       <img src="http://build.chromium.org/favicon.ico"> 
 
       <img src="http://www.apple.com/favicon.ico"> 
 
       <img src="http://opera.com/favicon.ico"> 
 
       <img src="http://mozdev.org/favicon.ico"> 
 
       <img src="http://webkit.org/favicon.ico"> 
 
       <img src="https://vivaldi.com/favicon.ico"> 
 
       <img src="http://www.srware.net/favicon.ico"> 
 
       <img src="http://build.chromium.org/favicon.ico"> 
 
       <img src="http://www.apple.com/favicon.ico"> 
 
       <img src="http://opera.com/favicon.ico"> 
 
       <img src="http://mozdev.org/favicon.ico"> 
 
       <img src="http://webkit.org/favicon.ico"> 
 
       <img src="https://vivaldi.com/favicon.ico"> 
 
       <img src="http://www.srware.net/favicon.ico"> 
 
       <img src="http://build.chromium.org/favicon.ico"> 
 
       <img src="http://www.apple.com/favicon.ico"> 
 
       <img src="http://opera.com/favicon.ico"> 
 
       <img src="http://mozdev.org/favicon.ico"> 
 
       <img src="http://webkit.org/favicon.ico"> 
 
       <img src="https://vivaldi.com/favicon.ico"> 
 
       <img src="http://www.srware.net/favicon.ico"> 
 
       <img src="http://build.chromium.org/favicon.ico"> 
 
       <img src="http://www.apple.com/favicon.ico"> 
 
       <img src="http://opera.com/favicon.ico"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <span class="placeholder"></span> 
 
    </div> 
 
    
 
    </body> 
 
    </html>

источник

2012-06-21 20:27:48

как автоцентрировать миниатюры для всех размеров экрана

ответ

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