css语言如何使箭头垂直居中?

html-css026

css语言如何使箭头垂直居中?,第1张

#arrowhead //需要组件代码用id="arrowhead",例如<div id="arrowhead">

{

position: absolute//绝对位置(必填)

top:50%//顶边居中(选填)

left:50%//左边居中(选填)

//要填其中一个,html代码<div>

//                                               <img id="arrowhead">

//                                      </div>

//                                      在标签里居中,如果不放在标签里就是在窗口居中

}

使用

当然,其他任意方向也是可以的,只需要控制旋转角度rotate即可。原理是构造了一个正方形,隐藏了其中的两条边left和bottom,然后进行旋转。

通过使用正方形左下两条边,并向下向右平移,再旋转,得到一个向下并居中的箭头