用CSS居中内联块DIV“:在“;以垂直和水平为中心的废墟文本

Centering inline-block DIV with CSS ":before" ruins text centering both vertical and horizontal

本文关键字：垂直 水平 为中心 文本 废墟 CSS DIV      更新时间：2023-09-26

大家好，我设置了一些基于div的按钮居中，但在居中文本时出现了一些视觉问题（它不是真正居中的）：

#slide2
{
 text-align: center;
 text-align-last: center;	
 -moz-text-align-last: center;
}
#container2
{
height:100%;
}
.pagesContainer
{
        width:100%;
        height:50px;
        top:0%;
 }
.pageButtonContent
{
	width: 38px;
	height: 38px;
	background-color:white;
	border: solid 1px black;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
    display: inline-block;
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
     font-size: 20px;
     color:darkgray;
     border-radius: 50%;
     
}
.pageButtonContent:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  height:42px;
}
.pagesContainer:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
<div class='Slide' id='slide2' onscroll='changePosition()'>
	<div id = "container2" class="containert">
	<div id='' class='pagesContainer'>
		
			<div id='previous' class='pageButtonContent'>
      1
			</div>
		
		
		
			<div id='' class='pageButtonContent'>
			2
			</div>
		
	
	
			<div id='' class='pageButtonContent'>
			3
			</div>
		
		
	 	
			<div id='next' class='pageButtonContent'>
      4
			</div>
		
	</div>
</div>
</div>

我知道有很多不同的方法可以做到这一点，但到目前为止，这个设置是唯一有效的，我不想为了停留在主题中而回过头来解释所有这些。

由于某种原因，在应用css后，以:before为中心的文本似乎有点不对劲。看起来我通过设置42px的高度（它的容器是50px高）来垂直修复它，但我还不知道如何水平修复它，你们知道吗？

似乎您并不真正需要：before才能使其工作。您可以添加线高度以使数字垂直居中：

.pageButtonContent { line-height: 38px;}
相关文章：