更新图像以显示块

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

    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 2

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

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

<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 6

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

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/

CSS：在div中居中/对齐图像

9 个答案:

更新图像以显示块

保持图像内联显示