Центрирование плавающего div

Я застрял. Вот что у меня происходит: у меня есть виджет общего доступа AddThis рядом с основным изображением на веб-странице. Изображение меняет размеры, и мне нужно, чтобы AddThis динамически меняла его размещение с изображением. Я задал это в другом вопросе и на другом форуме смог получить некоторую помощь. Теперь AddThis и изображение правильно выровнены, и кажется, что все идет в правильном направлении, однако изображение больше не центрировано. Мне нужно, чтобы это изображение было центрировано на странице, но я не могу понять, как это сделать, потому что мне пришлось плавать в div, содержащем изображение и AddThis. Вот HTML:

<div class="feature-container">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;"><img class="feature-image" 
     src="/Images/test.jpg" width="300px;" alt="test" /></div>
<div style="position:absolute; bottom:0px; right:-40px;">
    <div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
        <a class="addthis_button_facebook"></a>
        <a class="addthis_button_twitter"></a>
        <a class="addthis_button_email"></a>
        <a class="addthis_button_compact"></a>
        </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/300
                 /addthis_widget.js"></script>
</div>
</div>
</div>

Любые идеи, как центрировать это? Я могу использовать прямое решение CSS или решение с использованием jQuery и CSS. Пожалуйста, приведите примеры.

Вот JSFIDDLE страницы.

Вот страница с самым последним кодом, который я пробовал.


javascript image jquery css addthis
person L84    schedule 24.05.2012    source источник
comment
Мне пришлось плавать в div - Почему? Я не знаю, что я могу предложить что-либо, не видя некоторые из окружающих элементов.   -  person nnnnnn    schedule 24.05.2012
comment
@nnnnnn - именно так действовал AddThis. Чтобы получить его положение относительно изображения, его нужно было плавать.   -  person L84    schedule 24.05.2012
comment
можете ли вы предоставить образец на jsfiddle?   -  person undefined    schedule 24.05.2012
comment
@Raminson - добавлена ​​скрипка в вопросе.   -  person L84    schedule 24.05.2012
comment
@ Линда, помимо всего, что здесь происходит, я ни разу не видел, чтобы ты очищала свои поплавки. Хотя это, безусловно, не проблема, с которой вы столкнулись, она вызовет другие проблемы в будущем. Эта статья показалась мне полезной, когда я пытался объяснить кому-то, как очищать поплавки. -- РЕДАКТИРОВАТЬ Кроме того, мы можем увидеть живой рабочий пример?   -  person Ohgodwhy    schedule 24.05.2012
comment
@Ohgodwhy - Ниже приведенного выше кода есть <br class="clear" />, также известный как `style=clear:both; что плавает и предотвращает дальнейшие проблемы. Спасибо что подметил это. И я создал скрипку. Смотрите ссылку в конце вопроса.   -  person L84    schedule 24.05.2012

Ответы (3)


arrow_upward
1
arrow_downward

попробуй это:

var pos = $('.center').width() - $('img').width();
$('.center').css('margin-left', pos);

http://jsfiddle.net/WY9YX/4/

person undefined    schedule 24.05.2012
comment
Мой комментарий, который я сделал ранее, похоже, исчез. Прошу прощения, если это появляется дважды. Я реализовал ваш js, и он работает, но создает пару других ошибок. Содержимое под изображением отбрасывается, и страница теперь очень широкая, а не придерживается ширины 940 пикселей. Я отредактировал скрипт, чтобы включить этот дополнительный контент, и добавил ссылку на страницу с самым последним кодом. Спасибо за вашу помощь. - person L84; 24.05.2012
comment
@Линда, пожалуйста. попробуйте это: $('.center').css('margin-left', pos/2); если ширина вашего контейнера 940 пикселей, а ширина изображения 300 пикселей, вы можете центрировать элемент, вычислив (940 - ширина изображения (300)) => 640 пикселей / 2 => 320 пикселей, поэтому margin-left:320px, я вижу вашу самую верхнюю оболочку не центрируется, если вы хотите правильно центрировать элементы, вы также должны центрировать оболочку: margin: 0 auto; - person undefined; 24.05.2012
comment
Работает с одним небольшим глюком! Код в вашем комментарии сработал после того, как я поигрался с тем, из чего он извлекал информацию. Вместо использования .center я создал еще один div, чтобы обернуть только изображение и код AddThis. Затем вместо использования $('img').width(); я добавил класс к основному изображению и использовал его. Теперь единственная проблема, которую я вижу, это то, что основное изображение и логотип под ним немного смещены от центра. Он может быть смещен от центра на 20 пикселей, но это заметно. Любые идеи, как это исправить? Примечание. Скрипка была обновлена. - person L84; 24.05.2012
comment
Еще одна вещь, которая кажется немного странной. Если я нажму CTRL + SHIFT + R в Firefox (чтобы переопределить и перезагрузить кеш), изображение немного сдвинется вправо. Я предполагаю, что это сбой в FF, а не в коде. Есть мысли по этому поводу? - person L84; 25.05.2012

arrow_upward
-1
arrow_downward

Я не уверен в содержании вашего 'im-center', так как я добавил встроенный стиль (text-align:center;), как показано ниже, протестировал его и отлично работает на ie 8.

<div class="img-center" style="text-align:center;">
  <img src="test.jpg" alt="test" />
</div>

Определить фиксированную ширину для центрального div было бы нормально, если это не требует фиксированной ширины, решение @Raminson jquery лучше. Я действительно хочу знать, сможем ли мы реализовать это с помощью чистого css.

<div id="top" class="wrap_fullwidth">
    <div class="center" style="width:400px;">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
    <div style="text-align:center;"><img src="http://www.ubhape2.com/Images/test.jpg" alt="test" /></div>
    <div style="position:absolute; bottom:0px; right:-40px;">
        <div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
            <a class="addthis_button_facebook"></a>
            <a class="addthis_button_twitter"></a>
            <a class="addthis_button_email"></a>
            <a class="addthis_button_compact"></a>
            </div>
        <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
    </div>
</div>
</div>

</div>​​​
person khuang    schedule 24.05.2012
comment
Вот что такое класс img-center. Я отредактировал сообщение, чтобы отразить это. Также это не работает. - person L84; 24.05.2012
comment
Какой у вас веб-браузер? Я тестировал его на IE8. - person khuang; 24.05.2012
comment
Странно, на хроме тоже пробовал, все ок. Основной причиной является «поплавок: левый» родительского контейнера? Вы можете сначала временно удалить 'float:left' и отладить его шаг за шагом. - person khuang; 24.05.2012
comment
Я добавил скрипку в свой вопрос. Удаление плавающей запятой портит выравнивание виджета AddThis. - person L84; 24.05.2012
comment
... Согласно моему тесту на скрипке, плавающий div не будет центрирован в родительском div (центральном div). в противном случае определите фиксированную ширину для родительского элемента div, см. пример: jsfiddle.net/WY9YX/14 - person khuang; 24.05.2012
comment
Я читал о способах центрирования плавающего div с использованием чистого css, однако держать AddThis рядом с изображением и сохранять его интервал независимо от размера изображения - это то, что отбрасывает все остальное. Я думаю, что здесь понадобится JS, если только в CSS нельзя сделать какой-то трюк, о котором я не знаю, и другие не публиковали его где-либо еще. - person L84; 24.05.2012
comment
Понял, js - экономичное и хорошее решение для вашей ситуации, узнал больше из вашего вопроса, спасибо. Кстати, вы и @Raminson интересуетесь моим вопросом: stackoverflow.com/questions/10730040/ - person khuang; 24.05.2012
comment
Рад, что ты смог чему-то научиться. И мне жаль, что я не могу помочь вам с вашим вопросом. Я не знаю ответ. - person L84; 24.05.2012

arrow_upward
-4
arrow_downward

Попробуйте применить правило CSS margin: 0 auto; к div.

person mega.venik    schedule 24.05.2012