Расположить изображения по центру

Тема в разделе "JavaScript", создана пользователем vave, 8 май 2014.

Модераторы: ZiX
  1. vave

    vave

    Регистр.:
    23 июн 2007
    Сообщения:
    364
    Симпатии:
    14
    Здравствуйте, дорогие друзья!
    Задам с виду простой, но как оказалось для меня, сложный вопрос))
    Установил приложение Gallery Plugin для WP, походу самый стандартный плагин...
    Но только работать с ним не возможно, файлы шаблона удаляю, и никакой реакции, такое ощущение что всё закопано в одном файле "gallery-plugin.php", и админка и шаблон...

    Вообщем вкладываю просто HTML код страницы с фотками, стиль тужа же скопировал.
    все JS удалил, они не нужны. Фотки меняют кол-во рядов в зависимости от размера окна.
    Было бы фиксированное кол-во рядов, запихал бы просто в <table>


    HTML:
    
    
               
           
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="ru-RU">
    
    
    
    
            <!-- Start ios -->
            <script type="text/javascript">
                (function($){
                    $(document).ready(function(){
                        $('#fancybox-overlay').css({
                            'width' : $(document).width()
                        });   
                    });   
                })(jQuery);
            </script>
            <!-- End ios -->
            <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
    <style>
    
    #toplevel_page_bws_plugins .wp-submenu .wp-first-item {
        display:none;
    }
    .bws_system_info_mata_box {
        width: 850px;
    }
    .bws_system_info {
        float: left;
        margin-right: 10px;
        width: 400px;
    }
    .bws_system_info th {
        padding: 10px 0;
        text-align: left;
        width: 50%;
    }
    .bws_system_info tbody td {
        border-bottom: 1px solid #DFDFDF;
    }
    
    ul.gallery {
        list-style: none outside none;
    }
    .gallery_box ul{
        list-style: none outside none !important;
        margin:0;
    }
    .gallery_box li{
        padding: 10px 10px 0 0;
        clear: both;
    }
    .gallery_box li img {
        padding: 5px;
        margin:0 10px 10px 0;
        float:left;
        border: 1px solid #BDBDBD;
    }
    .gallery_box p {
        margin-bottom:0px;
    }
    .gallery_detail_box {
        float:left;
    }
    .gallery_box .gallery_detail_box p.title {
        color: #000000;
        line-height: 1.5em;
        margin: 0 0 10px;
        font-weight: bold;
    }
    .clear {
        clear:both;
        height:0;
    }
    .gllr_image_text, .gllr_link_text {
        width:150px;
    }
    .gllr_link_text {
        width:170px;
    }
    .gllr_order_text {
        width:20px;
    }
    .gallery .gllr_image_block {
        float: left;
    }
    #content .gallery .gllr_image_block a img {
        border: 10px solid #F1F1F1;
        margin-top: 0;
        box-sizing: content-box;
        -moz-box-sizing: content-box; /*Firefox 1-3*/
        -webkit-box-sizing: content-box; /* Safari */
    }
    #Upload-File .gllr_order_message{
        padding-bottom:10px;
    }
    #Upload-File .gallery .gllr_image_block {
        float: left;
    }
    #Upload-File .gallery .gllr_border_image {
        border: 1px solid #BDBDBD;
    }
    #Upload-File .gallery .gllr_border_image img {
        padding:10px;
    }
    #Upload-File .gallery .small_text{
        font-size:10px;
        color:grey;
    }
    .clear {
        clear:both;
        height:0;
    }
    .gllr_image_text, .gllr_link_text {
        width:150px;
    }
    .gllr_link_text {
        width:170px;
    }
    .gllr_order_text {
        width:20px;
    }
    .gallery .gllr_image_block {
         
    }
    </style>
    <style type="text/css" media="print">#wpadminbar { display:none; }</style>
    <style type="text/css" media="screen">
        html { margin-top: 32px !important; }
        * html body { margin-top: 32px !important; }
        @media screen and ( max-width: 782px ) {
            html { margin-top: 46px !important; }
            * html body { margin-top: 46px !important; }
        }
    </style>
    </head>
    
    
    <div class="wrapper">
    
        <!-- BEGIN PAGE -->
    
       
                                   
    
                                                                   
                                                    <div class="gallery_box_single">
                                                <div class="gallery clearfix">
                                                                <div class="gllr_image_row">
                                                                        <div class="gllr_image_block">
                                            <p style="width:375px;height:360px;">
                                                                                            <a rel="gallery_fancybox" href="http://localhost/revolution/gallery/wp-content/uploads/2014/04/tolka5-1024x640.jpg" title="">
                                                    <img style="width:355px;height:340px; border-width: 10px; border-color:#ffffff" alt="" title="" src="http://localhost/revolution/gallery/wp-content/uploads/2014/04/tolka5-491x350.jpg" rel="http://localhost/revolution/gallery/wp-content/uploads/2014/04/tolka5.jpg" />
                                                </a>
                                                                                            </p>
                                            <div style="width:375px; " class="gllr_single_image_text">
                                                &nbsp;</div>
                                        </div>
                                                                        <div class="gllr_image_block">
                                            <p style="width:375px;height:360px;">
                                                                                            <a rel="gallery_fancybox" href="http://localhost/revolution/gallery/wp-content/uploads/2014/04/44.jpg" title="">
                                                    <img style="width:355px;height:340px; border-width: 10px; border-color:#ffffff" alt="" title="" src="http://localhost/revolution/gallery/wp-content/uploads/2014/04/44-491x350.jpg" rel="http://localhost/revolution/gallery/wp-content/uploads/2014/04/44.jpg" />
                                                </a>
                                                                                            </p>
                                            <div style="width:375px; " class="gllr_single_image_text">
                                                &nbsp;</div>
                                        </div>
                                                                        <div class="gllr_image_block">
                                            <p style="width:375px;height:360px;">
                                                                                            <a rel="gallery_fancybox" href="http://localhost/revolution/gallery/wp-content/uploads/2014/04/rg-1024x578.jpg" title="">
                                                    <img style="width:355px;height:340px; border-width: 10px; border-color:#ffffff" alt="" title="" src="http://localhost/revolution/gallery/wp-content/uploads/2014/04/rg-491x350.jpg" rel="http://localhost/revolution/gallery/wp-content/uploads/2014/04/rg.jpg" /></a></p>
                                        </div>
                                                                        <div class="gllr_image_block">
                                            <div style="width:375px; " class="gllr_single_image_text">
                                                &nbsp;</div>
                                        </div>
                                                                    </div>
                                                            </div>
                                                </div>
                        <div class="clear"></div>
       
               
                                           
       
               
    
                                   
       
               
    
     
  2. Vishez

    Vishez

    Регистр.:
    19 авг 2013
    Сообщения:
    169
    Симпатии:
    81
    Где вопрос-то?
     
  3. vave

    vave

    Регистр.:
    23 июн 2007
    Сообщения:
    364
    Симпатии:
    14
    хахаха да отжог)))
    вот что значит писать посты в 5 утра:lol:
    Нужно что бы эти картинки были по центру)))
     
  4. user8730

    user8730 Создатель

    Регистр.:
    16 авг 2014
    Сообщения:
    27
    Симпатии:
    7
    CSS
    для нужного объекта используйте

    margin: auto 0;

    сам объект должен быть ограничен

    width: 500px; (например)
     
  5. Nikita_Sp

    Nikita_Sp Создатель

    Регистр.:
    28 мар 2013
    Сообщения:
    15
    Симпатии:
    3
    У вас картинки в строку с помощью float:left формируются.
    Вам необходимо изменить float:left на display:inline-block;
    а потом можно их центровать при помощи обычного text-align:center;

    Или же задать родительскому элементу ширину и прописать ему margin: 0 auto;

    @user8730 а не margin: auto 0; !