【问题标题】:div container not centering [closed]div容器不居中[关闭]
【发布时间】:2012-08-15 18:56:49
【问题描述】:

我在网上浏览了一些基本的 css 内容,但找到了一些示例,但没有一个可以解释我的问题:

页面模板 [HTML]:

    <div id="container" class="gallery-list"> <!-----gallery-list---->
    <div id="content" role="main">
        <h1 class="page-title"><?php the_title(); ?></h1>
        <div id="gallery-list-container" class="list-container">
                <?php wp_reset_query(); ?> 
                <?php
                // Set up the arguments for retrieving the pages
                $args = array(
                    'post_type' => 'page',
                    'numberposts' => -1,
                    'post_status' => null,
                // $post->ID gets the ID of the current page
                'post_parent' => $post->ID,
                    'order' => ASC,
                    'orderby' => title
                    );
                 $subpages = get_posts($args);
                  if ($subpages[0]) :?>
                        <div class="gallery-list-wrap">
                            <?php
                             // Just another WordPress Loop
                             foreach($subpages as $post) :
                                setup_postdata($post);
                            ?>
                                <div id="post-<?php the_ID(); ?>" class="list-entry-container">
                                    <?php 
                                        $count++;
                                        // Show the Post thumbnail
                                        if ( has_post_thumbnail() ) : ?>

                                                <div class="list-entry">
                                                    <a class="size-small" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
                                                    <h2 class="list-entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'highart' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
                                                </div><!-- .entry-content -->                   
                                            <?php
                                        // Show the High Art image
                                         else : ?>
                                            <div class="entry-content">
                                                <?php highart_entry_image_attachment('thumbnail') ?>
                                            </div><!-- .entry-content -->                       
                                        <?php endif; ?>

                                        <div class="entry-utility">
                                            <?php edit_post_link( __( 'Edit', 'highart' ), '<span class="edit-link">', '</span>' ); ?>
                                        </div><!-- .entry-utility -->
                                </div>
                        <?php endforeach; ?>
                    </div>
                 <?php endif; ?>
        </div>
    </div><!-- #content -->
</div><!-- #container -->

[CSS]

#main .gallery-list{margin:0;width:925px;overflow:hidden; display:block;}
#main .gallery-list #content{width:925px;}
.list-container{margin:0 auto; display:block; padding:11px 0 0; list-style:none; border-bottom: 1px solid lightgray;}
.gallery-list #gallery-list-container {margin-top:-22px;float:none; width:925px;}
.gallery-list li {display:inline;width:185px;height:241px;margin-right:25px;padding:22px 0 44px;border:1px solid lightgray;border-width:0 0 0; position:relative; overflow:hidden;}
.gallery-list #gallery-list-container li {min-height:252px; display:inline;clear:none;padding-bottom:25px;}
.gallery-list-wrap{display:inline; float:left; margin:0 auto;}
.list-entry-container {display:inline; float:left;}
.gallery-list .list-entry{display:inline;width:165px;font-size: 9px; font-weight:400; line-height:11px; text-transform:uppercase; padding:5px 0 6px;}
.gallery-list-line-wrap{margin: 0 auto; display:block;}

为什么 div: gallery-list-wrap 不在容器中心? 它只是保持与容器的左侧对齐。

在这种情况下,我真的不明白浏览器是如何处理这个的。

可能是一个新手问题,但我似乎无法弄清楚

EDIT1: 根据下面的答案,这可能是一个有问题的方法,所以有一些背景故事: 我有一个 div,其中包含 div 的子页面以及页面的缩略图和标题。到目前为止这么好问题是我不知道有多少所以我不知道我是否每行有 1、2、3 或 4 个我希望每行最多有 4 个并且每行以容器为中心

这个方法可行吗?

感谢您的帮助。

【问题讨论】:

  • 最好不要链接到事物,而是发布您的实际问题 - 或演示其行为的表示,以便人们在将来找到您的帖子时可以参考和理解。
  • 解决问题的一部分是理解它。这是一个主观的过程,我们也试图在这里提供帮助,但您实际上需要提出一个对其他人有用的特定问题。不只是为了自己。这不是一个“如何让我成为我的网站”论坛,而是一个编程问答网站。

标签: html css


【解决方案1】:

你需要删除

display:inline;
float:left;

并为 gallery-list-wrap 添加一个宽度。

目前,您已将 margin-left 和 margin-right 设置为 auto,这是正确的做法,但要使其正常工作,您还需要定义宽度。

因此,如果您有两个 div,请计算出它们的组合宽度并将其应用到 gallery-list-wrap。

我希望这会有所帮助。

【讨论】:

  • 感谢部分工作的帮助查看:EDIT1
  • 至于edit1:添加到您的画廊列表换行宽度:925px;文本对齐:居中;然后使 list-entry-container 显示:inline-block;并删除他们的浮动左侧
  • 你是个天才先生谢谢你和 +1 ofc
【解决方案2】:

删除:

display: inline;
float: left;

【讨论】:

  • 感谢部分工作的帮助查看:EDIT1
猜你喜欢
  • 2015-04-18
  • 1970-01-01
  • 1970-01-01
  • 2013-10-02
  • 1970-01-01
  • 2011-01-17
  • 1970-01-01
  • 2022-11-11
  • 2012-09-23
相关资源
最近更新 更多