使用 CSS ":before" 居中 inline-block DIV 会破坏垂直和水平居中的文本

Question

大家好，我已经将一些基于 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 高）设法垂直修复它，但我还没有弄清楚如何水平修复它，你们有什么想法吗？

Answer 1

看来你真的不需要 :before 来让它工作。 您可以添加 line-height 以使数字垂直居中：

.pageButtonContent { line-height: 38px;}