2

I'm trying to align my img in center, but not happens with this code:

<div id="foto" style="position:relative; left:50%;">
    <img src="Imgs/pa1.PNG" width="160" height="240" alt="foto1" />
</div>
4

6 回答 6

3

利用text-align:

<div id="foto" style="text-align: center;">
   <img src="Imgs/pa1.PNG" width="160" height="240" alt="foto1">
</div>
于 2013-08-29T12:57:35.687 回答
2

不要使用内联样式。请参阅此演示 如果您提供外部 div text-align:center;，那么您 div 中的所有文本都将居中对齐。所以这不是一个好习惯。

<div id="foto">
    <img src="http://placehold.it/250x250" width="160" height="240" alt="foto1">
</div>

CSS

#foto {
    width: 100%;
}
#foto img {
    display: block;
    margin: 0 auto;
}
于 2013-08-29T12:59:15.257 回答
1

试试下面的CSS。

img {
 display: block;
 margin: 0 auto;
}

或者

#foto {
  text-align: center;
}
于 2013-08-29T12:59:44.933 回答
0

CSS

#foto
{
    margin-left:auto;
    margin-right:auto;
    width:1000px;//give width accordingly 

}

HTML

<div id="foto" >
   <img src="Imgs/pa1.PNG" width="160" height="240" alt="foto1">
</div>
于 2013-08-29T12:58:28.537 回答
0

有了一张图片，我觉得你可以简单地应用 css 规则“text-align：center;”

但是，如果这对您不起作用，您可以尝试取消位置规则并为“foto”div 设置宽度和自动边距，如下所示：

style="width:960px; margin: 0 auto;"

我也不确定您是否了解样式表，但将 CSS 与 HTML 分开也是一种很好的做法。

于 2013-08-29T12:58:44.960 回答
0

将 CSS 设为

div {
  text-align: center;
}

这是JSBin

于 2013-08-29T13:00:16.730 回答