使用CSS定中内联块DIV＆＃34;：之前＆＃34;废墟垂直和水平居中的文本

Question

大家好，我有这个设置，以设置一些基于div的按钮，但我在文本居中时有一些视觉故障（它没有真正居中）：

＆＃13;

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我知道有很多不同的方法可以做到这一点，但到目前为止，这个设置是唯一一个有效的方法，而且我不想回去试图解释所有留在主题。< / p>

出于某种原因，在应用css :before后，居中的文字似乎有点不对劲。看起来我设法通过设置42px高度（它的容器高50px）来垂直修复它，但我还没弄清楚如何水平修复它，你们和女士们有什么想法吗？

Answer 1

看来你真的不需要：才能让它发挥作用。 您可以添加行高以使数字垂直居中：

.pageButtonContent { line-height: 38px;}