Мои изображения не будут в центре - PullRequest
Новая
       19

Мои изображения не будут в центре

1 голос
/ 05 апреля 2011

Итак, я работаю над сайтом для своего класса AP Computer Science с использованием XHTML, и часть задания заключается в создании изображения с возможностью нажатия, которое будет ссылаться на внешний веб-сайт.Я делал это раньше, и изображения, которые у меня есть, будут связаны, но они не будут выравниваться по центру, как я им говорю.

Ниже приведен код из html-файла. 

<p class="display">
<a href="http://www.minecraft.net"><img src="Images/mclogo.png" width="200%" alt="Minecraft logo linked to MC's website" /></a></p>

А ниже приведен код, который определяет класс "display" 

p.display {text-align:center;}

Не могли бы вы помочь определить мою проблему.Я спросил моего учителя Compsci, и он сказал, что не видит ничего плохого.

Спасибо,

LordRaiden15

Ответы [ 5 ]

3 голосов
/ 05 апреля 2011

Просто удалите width = "200%" с изображения.

Смотрите здесь: http://jsfiddle.net/vX3vC/

Ширина изображения в процентах определяет процент от ширины его родителя, а не исходного изображения. На самом деле вы пытаетесь сделать изображение в два раза больше родительского, что не сработает и останавливается на 100%, следовательно, вы не можете выровнять центр, поскольку оно уже заполняет все пространство.

Найдено здесь: http://www.w3.org/TR/html401/struct/objects.html#adef-width-IMG

Обратите внимание, что длины, выраженные в процентах, основаны на доступном в настоящее время горизонтальном или вертикальном пространстве, а не на натуральном размере изображения, объекта или апплета.

Либо укажите ширину в пикселях, либо сделайте изображение правильного размера и вообще удалите спецификацию ширины.

1 голос
/ 05 апреля 2011

Необходимо применить выравнивание текста к контейнеру P, а не к изображению. 

.display
{
text-align: center;
}

Следует также избегать операций масштабирования изображений (200%), поскольку это потребляет ресурсы браузера.Просто получите версию с более высоким разрешением в нужном вам размере или измените размер изображения в другом приложении.В большинстве случаев размер файла будет незначительно увеличиваться в любом сценарии для png или jpg.

0 голосов
/ 30 марта 2016

просто добавьте это, и проект должен быть исправлен!Удачного кодирования!

<CENTER>
    <a href="http://www.minecraft.net">
        <img src="Images/mclogo.png" width="200%" alt="Minecraft logo linked to MC's website" />
    </a></p>
</CENTER>
0 голосов
/ 06 апреля 2011

Ваш код должен работать прямо сейчас (за исключением части width="200%"), так что это, вероятно, плавающая проблема.

Чего вы хотите достичь?Если вы хотите центрировать изображение по всей странице, извлеките его из вашего float: right; div.Если вы хотите центрировать изображение только в небольшом элементе float: right; (возможно, в качестве боковой панели справа), сделайте что-то вроде этого: http://jsfiddle.net/8vFHW/1/

Конечно, вы должны заменить свой код вашими иконкамии текст, но присутствует та же концепция.

0 голосов
/ 05 апреля 2011

выглядит довольно хорошо для меня. У вас есть другие правила стиля для этой страницы? Убедитесь, что вы не меняете атрибут p tags display (для эффективного выравнивания по центру он должен быть block. Также убедитесь, что вы не выполняете никаких float операций с изображением.

Вы также можете попробовать удалить width="200%" и использовать CSS для установки ширины.

Если ничего из этого не работает, опубликуйте какой-нибудь дополнительный код или опубликуйте сайт где-нибудь, где мы сможем поближе познакомиться.

...