CSS изображение смещено

Question

Я немного новичок в веб-дизайне. У меня есть веб-страница с двумя основными разделами - текст с логотипом и центрированное изображение ниже.

Чтобы логотип плавал с текстом первого раздела, я добавил стиль float: left; margin: 4px; к изображению.

Следующее изображение было центрировано ранее (в шаблоне есть «центрированный» стиль) Но теперь он неправильно выровнен с положением текста над разделом вместо центра страницы. Хотя эта ошибка возникает в IE, Firefox в порядке. Как заставить его выровняться правильно?

Код страницы:

    <img src="images/logo.png" alt="Product Logo" style="float: left; margin: 4px;"/>

    <p>All you need to make it work is to install the software and run it. The result will appear automatically!</p>

    <img class="centered" src="screenshots/screenshot_small.png" alt="Product Screenshot" title="Product Screenshot" style="text-align:center;" />
    <p class="caption">Product Screenshot</p>

Класс «Центрирование» определяется следующим образом:

img.centered {
display:block;
margin:0 auto;
padding:0;
text-align:center;
}

Спасибо.

Answer 1

Является ли ваше изображение элементом img? Если это так, я думаю, вам следует добавить к нему также display: block, чтобы плавающий элемент работал правильно.

Answer 2

Добавление «margin-top: 150px» во второе изображение решило проблему

Answer 3

У меня было много проблем с CSS и выравниванием вещей.

Во-первых, используйте em или% вместо px, они масштабируемы (для людей, использующих мобильные телефоны и тому подобное). При увеличении 100%, около 1 em = 16 пикселей.

Я обычно центрирую вещи, используя 2 деления следующим образом:

<div style="position:absolute; width:50%; left:50%;">
<div style="position:absolute; width:50%; left:-50%;">
    <!-- Image here -->
</div></div>

Лично я считаю, что это выглядит ужасно, но работает в каждом браузере, с которым я его тестировал.

Если вам нужно изменить положение, просто поиграйте со значениями.