2012-03-20 139 views
0

我有我想要的cemter三角形中心三角形

+2

考虑发布您的代码给公众,如使用http://jsfiddle.net – 2012-03-20 12:25:33

+0

由于某种原因,它不工作,我从谷歌btw三角形图像。 – LandY 2012-03-20 12:30:46

+0

'三角形2右上角重叠三角形':你是什么意思?你的演示中没有任何重叠,你的三角形没有右上角。 – 2012-03-20 12:40:19

回答

0

有两种方法可以做到这一点不说会在所有的屏幕尺寸工作表。第一种方式,那我建议你(因为它不使用绝对位置):

body { 
text-align:center; 
} 

#div1 { 
width: your width; 
margin:auto; 
} 

...和同为div2。第二种方法使用绝对定位,你需要知道你的div的宽度(它必须是固定的)。在您的例子是200像素,因此相应:

#div1 { 
position: absolute; 
left:50%; 
margin-left:-100px; /* half of your width */ 
} 

没有什么在这里添加了body

0

您可以margin:0 auto;中心,但注意,宽度需要指定这个工作。 (图像通常是这种情况)。这也只是水平方向,而不是垂直方向。

你也可以用绝对位置居中,代码应该是这样的:

centeredelement{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    height:<your-height>; 
    width:<your-width>; 
    margin-left: -<your-width>/2; 
    margin-top: -<your-height>/2; 
} 

注: 除非你使用HTML5和它根据文档类型

<!DOCTYPE html> 

你的IDS开始了号码无效(你的jsfiddle)!

0

首先,让你的ID的CSS属性不被拾起CSS的ID不能以数字开头。其次,你已经有一个工作宽度的宽度,所以你不需要完全放置你的图像来居中放置它们。所有您需要做的是提供的0 auto保证金自动居中他们,就像这样:

#a, #b{ 
    margin:0 auto; 
    width:200px; 
} 

Demo

+0

我需要他们并排和右下角1重叠三角形2 – LandY 2012-03-20 13:01:47

+0

@LandY有一个适当的容器来居中两个图像,你可以使用负边界的效果,如下所示:http://jsfiddle.net/xndHu/3/..请注意,你的图像有一个大的白色边框,所以你看不到提示触摸,我建议你使用透明PNG。 – 2012-03-20 13:15:47