如何在不改变宽度/高度的情况下垂直和水平对齐DIV中的图像?

Ear*_*son 2 javascript css jquery image alignment

有什么办法吗?使用Javascript/JQuery?我真的非常需要它.任何帮助表示赞赏.

ale*_*lex 7

不要求时不要使用JavaScript ....

背景方法

你可以把它设置为背景......

div {
   background: url(/path/to/img.png) no-repeat center center;
}
Run Code Online (Sandbox Code Playgroud)

jsFiddle.


position: absolute 方法

或者你可以img绝对定位......

div {
   position: relative;
}

div img {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -50px;
   margin-top: -50px;
}
Run Code Online (Sandbox Code Playgroud)

jsFiddle.

哪里-50px是图像的一半尊重尺寸.


display:table-cellvertical-align: middle方法

你也可以用vertical-align: middle.

div {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}
Run Code Online (Sandbox Code Playgroud)

jsFiddle.

请记住,这将无法正常工作<IE8.

还有更多方法可以实现这一目标......