使用 CSS ":before" 将行内块 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 来使其工作。您可以添加行高以使数字垂直居中：

.pageButtonContent { line-height: 38px;}

使用 CSS ":before" 将行内块 DIV 居中会破坏文本的垂直和水平居中

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

html

javascript

css

centering