1

我正在尝试将图像置于 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>

谢谢。

4

9 回答 9

3 
    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>
于 2013-06-21T13:16:50.620 回答
2 
div { width: 400px;
      background: yellow;
      text-align: center; 
     }
于 2013-06-21T13:15:44.253 回答
2

1/ 没有<div>结束标签...</div><div>

2/如果你想在 div 中对齐东西（在这种情况下是图像），只需将divtext-align: center设置为。

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/

于 2013-06-21T13:17:02.410 回答
2 
<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 中测试

于 2013-06-21T13:17:40.043 回答
2 
<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 中测试过。

于 2013-06-21T13:18:45.310 回答
1 
<div style="text-align:center"><img src="" /></div>
于 2013-06-21T13:17:46.443 回答
1

这样做，还是你想要以另一种方式？ http://jsfiddle.net/jvkG4/11/

<div>

你好世界你好世界你好世界

于 2013-06-21T13:19:12.563 回答
1

尝试这个：

img { display: block; margin: 0 auto }
div { width: 400px; background: yellow; }
于 2013-06-21T13:20:57.323 回答
1

有两种方法可以做到这一点。

将图像更新到显示块

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/

于 2013-06-21T13:22:32.043 回答