2013-12-01 2 views
-1

Я не могу показаться центром изображения внутри div. изображение, не центрированное, - это «quotimg», который находится внутри div-кавычки, который находится внутри головы div.Изображение внутри div не центрируется

В настоящее время обучения некоторые CSS и HTML (не предполагается использовать html5 элементы)

HTML

<div class="head"> 

    <div class="quotejd"> 

     <img id="quoteimg" src="pictures/quotes/jd.png"> 

     <p id="quote">“The only creatures that are evolved enough to convey pure love<br> are dogs and infants.”</p> 

</div> 

</div> 

CSS

.Head { 
background-image: url('pictures/dogwallpaper1.png'); 
background-repeat: no-repeat; 
background-size: cover; 
height: 550; 
text-align: center; 
margin: 0 auto; 
} 

.quotejd { 
margin: 0 auto; 
text-align: center; 

} 

#quoteimg { 
width: 5em; 
margin: 0 auto; 
text-align: center; 
display: block; 
float: none; 
} 

#quote { 
font-size: 1.8em; 
line-height: 1em; 
margin: 0 auto; 
text-shadow: 0px 0px 5px rgba(57,57,57,1); 
font-family: 'Nixie One', cursive; 
text-align: center; 
color: #ffffff; 
} 
+0

Работает нормально - http://jsfiddle.net/bjSZ5/ – lifetimes

+0

@DSG, похоже, не работает http://i.imgur.com/fKH158t.png, любые другие вещи должны влиять на это? – user3054987

ответ

0

Это споткнулся меня, когда я узнавал CSS тоже. Попробуйте установить div, окружающий ваше изображение (с классом .quotejd) на заданную ширину (т. Е. Width: 960px). Автоматическое значение поля не знает, как центрировать его в противном случае.

+0

Я пробовал устанавливать divs - "quotedj" и "head" 's width to 79em, который тоже не работал. Это то, что работало в то же время: заполнение div «quotejd» до 30px, но оно действительно не сосредоточено – user3054987

+0

Да, отступы не будут способ центрировать его. Вы хотите, чтобы ваша головная часть заполнила всю страницу? Я могу установить ширину .head на 100%, а затем установить внутренний div «.quotejd» примерно на 75%. Каждый раз, когда вы используете margin: 0 auto, вам нужно указать вашу ширину (и я склонен использовать проценты для ее проверки). Возможно, как сказал Ankit выше, скриншот того, что вы пытаетесь сделать, поможет. – shudsonbstar4

+0

i.imgur.com/fKH158t.png, я бы хотел, чтобы он оставался около 79em. – user3054987

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