将图像对齐在中心

Question

我正在尝试将我的图像对齐到中心，但不会出现在此代码中：

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

Answer 1

使用text-align:

<div id="foto" style="text-align: center;">
   <img src="Imgs/pa1.PNG" width="160" height="240" alt="foto1">
</div>

Answer 2

不要使用内联样式。见 demo 如果您提供外部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;
}

Answer 3

尝试以下css。

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

或

#foto {
  text-align: center;
}

Answer 4

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

Answer 5

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

但是如果那些不适合你的话可以尝试取出位置规则并给“foto”div一个宽度和一个自动保证金如下：

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

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

Answer 6

将CSS设为

div {
  text-align: center;
}

这是JSBin