2014-09-06 2 views
0

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

Я не совсем уверен, в чем проблема. Код работал на отдельный файл, но когда я попытался запустить новый проект, он просто больше не работал. :/

Вот мой HTML:

<!DOCTYPE html> 
<html> 
<head> 
<title>Good Boy</title> 
<link rel="stylesheet" type="text/css" href="goodboyslove.css"> 
<link rel="shortcut icon" href="images/GBFavicon.ico"> 
</head> 

<body> 
<a href="http://www.oriko-san.tumblr.com/"><img id="gblogo" class="center" src="images/GB.png" alt="good boy logo" width="128" height="128"> 

Вот мой CSS:

<!DOCTYPE css> 

.center { 
display: block; 
margin-left: auto; 
margin-right: auto; } 

#gblogo{position:relative;top:32px;} 
+5

удалить доктайп CSS –

+1

Что сказал @ Брайан, к тому же это не очень хорошее решение центра образ, который обернут якорем-тегом, таким образом. Все пространство будет доступно для просмотра. Попробуйте обернуть привязку элементом уровня блока и добавить к нему 'text-align: center;'. ** [Демо здесь] (http://jsbin.com/nuceqi/1/edit) ** –

+0

Я должен, вероятно, указать другой проект с работающим кодом, имеющим дополнительную кодировку, но я полностью просмотрел все это и не мог найти что-нибудь, что может повлиять (по крайней мере, насколько мне известно). Я на 100% уверен, что это не ошибка программного обеспечения. – Evau

ответ

4

doctype является объявление типа документа, который не является действительным в CSS документе. Удаление этого решения решит проблему. CSS относится к типу MIME, который вы объявляете с помощью type="text/css" вашего тега ссылки.

Here является введение статьи о HTML и включает в себя раздел об использовании doctype

0

Try This! (я не гарантирую)

Ваш файл HTML:

<!DOCTYPE html> 
<html> 
<head> 
<title>Good Boy</title> 
<link rel="stylesheet" type="text/css" href="goodboyslove.css"> 
<link rel="shortcut icon" href="images/GBFavicon.ico"> 
</head> 

<body> 
<a href="http://www.oriko-san.tumblr.com/"><img id="gblogo" class="center" src="images/GB.png" alt="good boy logo" width="128" height="128" /></a> 
</body> 

Ваш файл CSS:

.center { 
display: block; 
margin-left: auto; 
margin-right: auto; 
position: relative; 
} 
+1

Я тоже не гарантирую. Какой смысл в позиционировании 'relative' здесь? –

+0

ну, я нашел его в Интернете. я просто случайно помещал некоторые коды, и это сработало! (безумно правы?) – sfdsfds

+0

Просто потому, что вы что-то нашли в Интернете, это не значит, что это правда во всех случаях. Относительное позиционирование не влияет на этот конкретный случай. произошло из-за неверного утверждения в таблице стилей, как указал Брайан. –

Смежные вопросы