网站建设需要多少钱文档网页设计入门首先要学什么
一、Css样式居中
1.1、用flex布局来使子元素居中
flex中justify-content是指定子元素在主轴上的对齐方式；align-items是子元素在交叉轴上的对齐方式。
所以我们可以通过设定这两个属性为居中来使子元素居中。
.navbar {display: flex; //flex 布局justify-content: center; //主轴上的对齐方式align-items: center; //交叉轴上的对齐方式
}
1.2、设置left:0,right:0,bottom:0,margin:auto,通过自适应margin来居中。自适应margin使其符合前面的条件。
li {position: relative;.cursor {position: absolute;left: 0;right: 0;bottom: 0;margin: auto;}
}
1.3、通过移动和定位来居中
li {position: relative;a {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
}
二、怎么使点击包裹a标签外的容器元素也能触发a标签的点击事件
从点击事件的event对象上找到子元素触发点击事件。
<liclassName={tabIndex === 1 ? "active" : ""}onClick={(e) => {const target = e.target as HTMLTextAreaElement; //ts写法：告知该元素是什么类型const child = target.children[0] as HTMLElement | null;console.log(child);child?.click(); //子元素点击事件//e.target.childNodes[0].click();setTabIndex(1);}}
><span><NavLink className="navbar-brand" to="/discovery">发现音乐</NavLink></span><div className={tabIndex === 1 ? "cursor triangle" : ""}></div>
</li>