CSS: центрирование/выравнивание изображения в div

Question

Я пытаюсь центрировать изображение в div. В div содержится элемент img и элемент h3. Вот код из JSFiddle:

http://jsfiddle.net/johngoche99/jvkG4/6/

img { text-align: center; } 
div { width: 400px; background: yellow; } 

<div> 
    <image alt="Hello" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSpxx-IcjRJjDCKXZ6y4eMcUkShjBB_U_Y8OOy8nRR_qT9-ZgG24A" /> 
    <h3>Hello World Hello World Hello World</h1> 
<div> 

Спасибо.

Answer 1

div { width: 400px; 
     background: yellow; 
     text-align: center; 
    } 

Answer 2

try this 

     div { width: 400px; background: yellow; text-align: center; } 
    img { } 

<div> 
    <image alt="Hello" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSpxx-IcjRJjDCKXZ6y4eMcUkShjBB_U_Y8OOy8nRR_qT9-ZgG24A" /> 
    <h3>Hello World Hello World Hello World</h1> 
</div> 

Answer 3

1/<div> имеет закрывающий тег </div> не <div> ...

2/, если вы хотите, чтобы выровнять вещи (изображение в данном случае) в DIV просто установите text-align: center на div.

3/ также: <h3>Hello World Hello World Hello World</h1> не выглядит правильный X_x решить, какой заголовок вы хотите и пойти:

<h1>My header</h1> 

или

<h3>My header</h3> 

4/ Исследование CSS чуть больше здесь, например, здесь: http://www.w3schools.com/css/

Answer 4

<div><center> 
    <image alt="Hello" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSpxx- IcjRJjDCKXZ6y4eMcUkShjBB_U_Y8OOy8nRR_qT9-ZgG24A" /> 
    <h3>Hello World Hello World Hello World</h1> 
    <center> 
<div> 

Испытано в JSFiddle

Answer 5

<div style="text-align:center"><img src="" /></div> 

Answer 6

<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSpxx-IcjRJjDCKXZ6y4eMcUkShjBB_U_Y8OOy8nRR_qT9-ZgG24A" style=" display: block; 
margin-left: auto; 
margin-right: auto;"/> 

Это будет работать. Просто протестирован в JSfiddle.

Answer 7

Сделайте это так, или вы хотите его по-другому? http://jsfiddle.net/jvkG4/11/

<div> 

Hello World Hello World Hello World

Answer 8

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

img { display: block; margin: 0 auto } 
div { width: 400px; background: yellow; } 

Answer 9

Есть два способа сделать это.

Обновление изображения для отображения блока

img { margin: 0 auto; width: 120px; display: block; } 
div { width: 400px; background: yellow; } 

http://jsfiddle.net/jvkG4/18/

Сохранение изображения Встроенный дисплей

img { } 
div { width: 400px; background: yellow; text-align: center; } 

http://jsfiddle.net/jvkG4/17/