Question

我想将绝对定位的图像水平居中放在相对定位的容器中。我尝试用 css 。但我不能和我在Jquery

做的

http://jsfiddle.net/CY6TP/ [这是我试图在Jquery中做的]

**Guys can anyone help me to do this in CSS.**

提前致谢

Answer 1

试试这个：

var width=$('.main').width();
var height=$('.main').height();


$('a').css(
{
"position":"absolute",
"bottom":"50%",
"margin-top":(height/2),
"left":(width/2)-50

});

DEMO

<强>更新

在CSS中

.main a{
   bottom:50%;
    margin-top:-150px;   
    position:absolute;
    left:75px;
}

DEMO

Answer 2

您可以像这样在CSS中设置所有内容：

a{
position : absolute ;
height : 10px;
width : 100px;
top : 50%; 
margin-top : -5px;
left : 50%; 
margin-left : -50px;}

Demo

Answer 3

尝试将其设为水平居中

a{
    position: absolute;
    text-align: center;
    width: 100%;
}

或者这使它水平和垂直都居中

a {
    height: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
}

Answer 4

.main img { top:50%; left:50%; margin: -11px 0 0 -50px; position: absolute;}

这是你想要的吗？

Answer 5

如果你的身高是固定的，你可以使用这样的东西吗？

<强> CSS：

#div1 {
    width:100%;
    height:100px;
    text-align:center;
}

#div1 img {
    line-height:100px;
}

<强> HTML：

<div id="div1">
    <img src="yourimage.jpg" />
</div>

图像（绝对定位）在“相对定位”容器中水平居中

5 个答案: