css变圆角 字体居中不了

今天在写网页的时候遇到了两个问题,一个是CSS怎样实现把边框变成圆角的效果,另一个是怎么让字体在居中的情况下也能够垂直居中。下面我将会针对这两个问题进行一一解答。 首先是CSS如何让边框变成圆角。我们可以使用border-radius这个属性来实现。具体代码如下:
.Box {
    border-radius: 10px;
}
以上代码意思是给class为Box的元素设置一个圆角半径为10px的圆角效果。其中border-radius中的10px可以自由更改,以达到你想要的效果。 接下来是第二个问题,怎样让字体在水平居中的同时也能够垂直居中。这个问题的解决方法可以比较简单,我们可以使用CSS的flexBox布局来实现。具体代码如下:

css变圆角 字体居中不了

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container p {
    text-align: center;
}
以上代码中,我们给容器设置了一个flex布局,让p标签中的内容在水平居中的同时也保持了垂直居中的效果。其中justify-content: center是让元素水平居中,align-items: center是让元素垂直居中。 文章至此结束,相信经过这篇文章的介绍,大家也能够轻松的实现CSS的圆角效果和字体的水平垂直居中了。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效