css右对齐_CSS居中问题总结
题外话
耽搁了半年的学习，发现如今还得重头学，我真是个天才！！
居中问题⼤概可以分为⽔平居中和竖直居中，同时⼜分为⾏内元素和块级元素。现在我就跟随我⼀起总结⼀下。⼀、利⽤text-align:center实现⽔平居中
你⼀定想问text-align是啥，来⼀起探讨⼀下text-align是个什么东西
关于text-align 在w3school中是这样解释的：
意思就是对⼀个元素内部的⽂本进⾏⽔平对齐
有如下的选项 （这就相当于word⽂件的对齐⽅式⼀样的 有左对齐、右对齐、居中对齐）
left：居左对齐
right：右对齐
center：居中
start：如果⽅向是左向右（ltf）的话=left end：同上
justify：两端对齐，最后⼀⾏⽆效
justify-all：强制最后⼀⾏两端对齐
match-parent：和inherit类似，区别在于start和end的值根据⽗元素的direction确定，并被替换为恰当的left或者right。
容器下使⽤，如果在span 这种标签中使⽤，是不会进⾏⽔平居中的。
我们在使⽤的使⽤要在容器下使⽤
单个内联元素
单个内联元素
然⽽在实际测试中会发现不仅仅对⽂本元素有效！嘿嘿嘿，我们⼀起来看⼀下。
我们就不测试⽂本元素了，我们先从div块开始，然后⽤cssz将他display:inline⼀下，看⼀下效果
html中的代码如下：（为了便于观看设置边框并把⽗级元素设置成了 100px⾼度。）
<div class="father">
<div class="son">
</div>
</div>
css代码如下
.father {
border: 1px solid #000;
height: 100px;
}
.
son {
/*display: inline;*/
border: 1px solid #ccc;/*变为内联元素之后，由于是内联元素，⾼度对其不起作⽤*/
height: 50px;
显⽰效果如图：
将css中注释去掉，加上text-align:center可以发现：
可以发现！居中了，所以我们可以知道这个text-align不仅仅对⽂本有效果，对于inline都有居中的效果。
这个text-align不仅仅对⽂本有效果，对于inline都有居中的效果。之后在尝试display:inline-block
.father {
border: 1px solid #000;
height: 100px;
text-align: center;
}
.son {
display: inline-block;
border: 1px solid #ccc;
height: 50px;
}
text-align的第⼆个作⽤，就是对inline-block也有居中效果！
也可以居中！所以text-align的第⼆个作⽤，就是对inline-block也有居中效果！
多个内联元素（⼀个内联标签+⼀个图⽚标签）
多个内联元素（⼀个内联标签+⼀个图⽚标签）
对于我来说，在探究内联标签的时候，我总会考虑到图⽚的标签，总觉得图⽚和他们不太⼀样。
这是html代码
<div class="father">
<img src="location.png">
<span>这是内联元素</span>
</div>
同样在只加边框的效果是这样的。
图⽚撑开了father容器，并且⽂本以图⽚底端对齐，在之前的⽂章中探讨过这个问题。
再加⼊了样式之后
.father {
border: 1px solid #ccc;
text-align: center;
还是⼀样的。
除了⽤text-align之外，还可以⽤flex布局的justify-content。以下是实例；
.
father {
border: 1px solid #ccc;
display: flex;
justify-content: center;
}
同样成功了！想了解flex布局的话，推荐看⼀下这个内容
Flex 布局语法教程 | 菜鸟教程www.runoob!图标
【⼩节】⾏内元素不管是⼏个都是可以⽤text-align进⾏⽔平居中的。
所以总结⼀下：
1. ⾏内元素⽔平居中⽐较简单，只需要在⽗容器加⼊text-align:center这⾏代码
2. text-align对于具有inline属性的元素都有⽔平居中的效果。
3. 适⽤于多个元素。
⼆、利⽤margin：auto
⽗元素-⼦元素/2的外边距。所以如果给定了⽗⼦宽⾼的话话，会很容易居中。
margin:auto这个属性的意思是，⽗元素-⼦元素/2的外边距
既然我们对内联元素居中不了，那我们就将他变⾝，变成易于操控的块！只有⼀个内联元素，⾸先将这个元素变为block，然后设置前提是需要设置 宽度 auto的原理就是确认好元素宽度 ⽤(⽗元素宽度-元素宽度)/2）
margin:auto（前提是需要设置 宽度 auto的原理就是确认好元素宽度 ⽤(⽗元素宽度-元素宽度)/2
按照常理来讲，我们将⽗⼦元素设置宽⾼之后，应⽤margin:auto⾃适应，就会出现垂直居的效果，可是造化弄⼈，⼈⽣难免⼏多风⾬(┬＿┬)。
<style>
.
father {
height: 100px;
background-color: #ccc;
}
.son {
height: 50px;
width: 50px;
background-color: blue;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
可以看出，⽔平元素居中了，但是垂直⽅向有点问题，这是为什么呢？
狠狠的点击这篇⽂章
这是因为，如果 margin-top或者margin-bottom 设置为auto，他们的值就被设置为0。
// 有时间应该好好研读⼀下⽂档。
如何⽤margin:auto实现垂直居中呢？
1. 可以使⽤position:absolute cffg
在上⾯的代码中加⼊
<style>
.father {
height: 100px;
background-color: #ccc;
position: relative;
}
.
son {
height: 50px;
width: 50px;
background-color: blue;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
将定位设置为绝对定位，然后将top bottom left right设置为0，同时margin:auto，在⽗元素加上 position:relative，可以将元素相对⽗元素，⽔平居中对齐。
其中张鑫旭⼤神的⼀篇⽂章提到了这个问题：狠狠的点击
三、使⽤vertical-align垂直居中
1. vertical-align和line-height
关于line-height，张鑫旭写的⼀篇⽂章，css⾏⾼line-height的⼀些深⼊理解及应⽤，推荐看看。
内联元素起作⽤的。
类似于对块级元素的height，⾏⾼是针对于内联元素
块级元素有⼀个box盒⼦模型，⽽内联元素也有⼀个inlinebox 模型，这个模型中每⼀⾏都是⼀个line（哈哈哈哈 说的好有趣），所谓line-height 就是这些⾏的⾼度啦。具体在上述链接中已经有详细内容。
对于单⾏⽂字，直接使⽤line-height设置为⽗元素盒⼦宽度即可。
所以对于单⾏⽂字
.father {
height: 100px;
border: 1px solid #ccc;
line-height: 100px;
}
效果如图：
但是这个图⽚好像并没有居中，这是为 什么呢？需要深刻理解line-height和vertical-align属性
css设置文字垂直居中CSS深⼊理解vertical-align和line-height的基友关系
彻底搞定vertical-align垂直居中不起作⽤疑难杂症 - 掘⾦juejin.im
经过两个⽂本的学习 ，我们有了⼤概的了解。因为默认的是 基线baseline 对齐，所以我们需要将两个元素 都改为vertical-align:middle改为中间线对齐（x的中⼼2/3处）
//以下内容出现了⼀些疑惑，先记下来，⽇后来解决
现在我们把图⽚拿掉，并且在代码中加⼊ “X”
<div class="father">
<span>这是内联元素X</span>
</div>
css代码如下
.father {
height: 100px;
border: 1px solid #ccc;
}
.father span{
vertical-align: middle;
background-color: red;
}
在加⼊vertical-align:middle 和 不加⼊ 两者对⽐如下。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。