Question

我的图像没有居中，我遇到了一个很大的问题 - 我希望它位于.container div的中心，而不是“左对齐”。我试过display:block; and margin: 0 auto;但没有改变。

下面的CSS类已通过相应的响应式css调用 - 我没有更改这些文件。

HTML：

 <!-- Logo Area -->
    <style type="text/css">#masthead { top: 37px;} </style>
    <div id="logoArea-wrap">
        <div class="container">
            <div class="col span_2">

                <?php if($ct_options['ct_logo']) { ?>
                    <a href="<?php echo home_url(); ?>"><img class="site-logo" src="<?php echo $ct_options['ct_logo']; ?>" alt="<?php bloginfo('name'); ?>" /></a>
                <?php } else { ?>
                    <a href="<?php echo home_url(); ?>"><img class="site-logo" src="<?php echo get_template_directory_uri(); ?>/images/day-spa-logo.png" alt="WP Day Spa, a WordPress theme by Contempo" /></a>
                <?php } ?>                
            </div>
                <div class="clear"></div>

        </div>
    </div>
    <!-- //Logo Area -->

Answer 1

您可以尝试以下内容：

将内部div更改为span_12类，使其宽度为100％
在同一个div上，添加text-align: center
为165px的图像添加固定宽度（我使用了那个尺寸，因为它现在是什么样的）。
删除图片上的display: block

这应该使图像居中

Answer 2

我认为代码已被bootstrap css覆盖，所以请尝试添加！important，或确保代码在bootstrap css文件后加载：

.container {
    text-align: center !important; 
}

或者

#logoArea-wrap {
    text-align: center !important; 
}

Answer 3

尝试一下，这对我有用。

    .container {
        width: 200px;
        height: 100px;
        border: 1px solid #000;
    }
    .container img{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

或者您可以使用此jsFiddle

图像不居中

3 个答案: