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

vave

vave

Полезный
Регистрация
22 Июн 2007
Сообщения
467
Реакции
16
Здравствуйте, дорогие друзья!
Задам с виду простой, но как оказалось для меня, сложный вопрос))
Установил приложение 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>
 
vave написал(а):
Здравствуйте, дорогие друзья!
Задам с виду простой, но как оказалось для меня, сложный вопрос))
Установил приложение 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>
Нажмите для раскрытия...
Где вопрос-то?
 
хахаха да отжог)))
вот что значит писать посты в 5 утра:lol:
Нужно что бы эти картинки были по центру)))
 
CSS
для нужного объекта используйте

margin: auto 0;

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

width: 500px; (например)
 
У вас картинки в строку с помощью float:left формируются.
Вам необходимо изменить float:left на display:inline-block;
а потом можно их центровать при помощи обычного text-align:center;

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

@user8730 а не margin: auto 0; !
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху