Изображение не центрируется

Question

У меня огромная проблема с тем, что мое изображение не центрируется - я хочу, чтобы оно было в центре блока .container, а не «по левому краю». Я пробовал 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 -->

html css

0

Jess McKenzie 6 Мар 2015 в 07:00

Answer 1

Вы можете попробовать следующее:

Измените внутренний div, чтобы иметь класс span_12, чтобы дать ему 100% ширину
В том же div добавьте стиль для text-align: center
Добавьте к изображению фиксированную ширину 165px (я использовал этот размер, потому что он такой, какой он сейчас).
Удалите display: block с изображения

Это должно центрировать изображение

1

sma 6 Мар 2015 в 04:24

Answer 2

Попробуйте, это работа для меня.

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

Или вы можете использовать это, jsFiddle

0

batMask 6 Мар 2015 в 04:29

Answer 3

Я думаю, что код был переопределен bootstrap css, поэтому попробуйте добавить! Important или убедитесь, что код загружается после файла bootstrap css:

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

Или же

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

0

Sing 6 Мар 2015 в 04:14

Изображение не центрируется

3 ответа

Похожие вопросы

Новые вопросы

html