text-align

<!DOCTYPE html>

<head>

<title>lianxi</title>

<style>

.father{

text-align: center;

width: 100%;

height: 50px;

}

</style>

</head>

<body>

<span class="son">libuyi</span>

</div>

</body>

</html>

老师我有点搞不清text-align的作用了，这个属性不是使得容器内的文本居中吗，为什么span标签也会居中呢？

源自：CSS网页布局基础 3-2 圣杯布局案例（了解即可）

收起

2回答

好帮手慕粉 2020-03-17 20:26:02

同学你好，同学的样式是有问题的吧，老师这边粘贴过来是这样的：

同学可以将其修改正成正确的样式设置。

另外，建议同学到相关的课程的课程部分进行提问呢。

祝学习愉快~

好帮手慕粉 2020-03-17 18:46:06

同学你好，text-align是设置块级元素内文本的水平对齐方式，也就是说只要父容器是块级元素，子容器是行内元素或者行内块元素，内容都可以居中显示，在这个里面，因为文字是行内元素，所以可以居中显示。

同学再理解下。

祝学习愉快~

提问者早知今日何必當初 #1

<template> <div class="titleWrapper" v-show="show"> <div class="left"> <span class="icon-back iconfont"></span> </div> <div class="right "> <div class="iconWrapper"> <span class="icon-cart iconfont"></span> </div> <div class="iconWrapper"> <span class="icon-person iconfont"></span> </div> <div class="iconWrapper"> <span class="icon-More iconfont"></span> </div> </div> </div> </template> <script> export default { name: 'ebookTitle', props: { show: Boolean } } </script> <style lang="stylus" scoped> // @import "~styles/mixin.styl" .titleWrapper width 100% height 1.125rem display flex position absolute top 0 left 0 background #fff z-index 99 font-size 1rem .left display flex flex 0 0 1.75rem display flex align-items center text-align center .right display flex flex 1 justify-content flex-end padding-right 0.625rem .iconWrapper // center() .iconfont font-size 1rem </style> 那为什么我这块的left类里面的那个span不居中呢

2020-03-17 18:51:01