使用div按钮

Question

我正在为项目制作一些按钮，并且在按钮中的文本垂直居中时遇到问题。我想我只会为<p>元素设置一个负边距，但它不像我想的那样工作。

JS FIDDLE

HTML

<div class="tabscontainer1">
<div class="taskTabs">

<div class="taskTabs taskTab1"> <span class="taskIcons" id="taskIcon1"> </span> <p>Tasks</p> </div>
<div class="taskTabs taskTab2"> <span class="taskIcons" id="taskIcon2"> </span> <p>Completed Tasks</p> </div>
<div class="taskTabs taskTab3"> <span class="taskIcons" id="taskIcon3"> </span><p>Deleted Tasks</p> </div>

</div>
</div>

CSS

.tabscontainer1{
    padding:0px;
    float:left;
    left:0px;
    padding-bottom:10px;
}

.tabscontainer1:before{
    padding:0px;
    float:left;
    left:0px;
    padding-bottom:10px;
}

.taskTabs{
    width:auto;
    height:66px;
    border-radius:8px;
    display:inline-block;
    left:0px;
    margin-right:15px;
    margin-top:17px;
    }

.taskTabs p{
    font-family: 'Roboto Condensed', sans-serif;
    font-size:17pt;
    padding-left:10px;
    padding-right:16px;
    display:inline-block;
    }

.taskTab1{
     border: 1px solid #4c9cfd;
  -webkit-box-shadow:0 0 0 5px #01101f;
  -moz-box-shadow:0 0 0 5px #01101f;
  -o-box-shadow:0 0 0 5px #01101f;
  box-shadow:0 0 0 5px #01101f;
    }

.taskTab2{
     border: 1px solid #4c9cfd;
  -webkit-box-shadow:0 0 0 5px #01101f;
  -moz-box-shadow:0 0 0 5px #01101f;
  -o-box-shadow:0 0 0 5px #01101f;
  box-shadow:0 0 0 5px #01101f;
    }

.taskTab3{
     border: 1px solid #4c9cfd;
  -webkit-box-shadow:0 0 0 5px #01101f;
  -moz-box-shadow:0 0 0 5px #01101f;
  -o-box-shadow:0 0 0 5px #01101f;
  box-shadow:0 0 0 5px #01101f;
    }

.taskIcons{
    background:url(images/TaskIconMap.png) no-repeat;
    width:40px;
    height:39px;
    display:inline-block;
    margin-left:16px;
    margin-top:12px;
    }
#taskIcon1{
    background-position: 0px 0px;   
    }
#taskIcon2{
    background-position: -42px 0px; 
    }

#taskIcon3{
    background-position: -84px 0px;     
    }

JS FIDDLE

谢谢！

Answer 1

尝试垂直对齐：

＆＃13;

＆＃13;

.tabscontainer1{
	padding:0px;
	float:left;
	left:0px;
	padding-bottom:10px;
}

.tabscontainer1:before{
	padding:0px;
	float:left;
	left:0px;
	padding-bottom:10px;
}
	
.taskTabs{
	width:auto;
	height:66px;
	border-radius:8px;
	display:inline-block;
	left:0px;
	margin-right:15px;
	margin-top:17px;
	}

.taskTabs p {
  display: inline-block;
  font-family: "Roboto Condensed",sans-serif;
  font-size: 17pt;
  margin: 0 !important;
  padding-left: 10px;
  padding-right: 16px;
  padding-top: 18px;
  vertical-align: top;
}

.taskTab1{
	 border: 1px solid #4c9cfd;
  -webkit-box-shadow:0 0 0 5px #01101f;
  -moz-box-shadow:0 0 0 5px #01101f;
  -o-box-shadow:0 0 0 5px #01101f;
  box-shadow:0 0 0 5px #01101f;
	}
	
.taskTab2{
	 border: 1px solid #4c9cfd;
  -webkit-box-shadow:0 0 0 5px #01101f;
  -moz-box-shadow:0 0 0 5px #01101f;
  -o-box-shadow:0 0 0 5px #01101f;
  box-shadow:0 0 0 5px #01101f;
	}
	
.taskTab3{
	 border: 1px solid #4c9cfd;
  -webkit-box-shadow:0 0 0 5px #01101f;
  -moz-box-shadow:0 0 0 5px #01101f;
  -o-box-shadow:0 0 0 5px #01101f;
  box-shadow:0 0 0 5px #01101f;
	}
	
.taskIcons{
	background:url(http://s32.postimg.org/9jx6xtvk5/Task_Icon_Map.png) no-repeat;
	width:40px;
	height:39px;
	display:inline-block;
	margin-left:16px;
	margin-top:12px;
	}
#taskIcon1{
	background-position: 0px 0px;	
	}
#taskIcon2{
	background-position: -42px 0px;	
	}
	
#taskIcon3{
	background-position: -84px 0px;		
	}
	

＆＃13;

<div class="tabscontainer1">
<div class="taskTabs">

<div class="taskTabs taskTab1"> <span class="taskIcons" id="taskIcon1"> </span> <p>Tasks</p> </div>
<div class="taskTabs taskTab2"> <span class="taskIcons" id="taskIcon2"> </span> <p>Completed Tasks</p> </div>
<div class="taskTabs taskTab3"> <span class="taskIcons" id="taskIcon3"> </span><p>Deleted Tasks</p> </div>

</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加vertical-align：middle;对于'P'tag和图标标记：

.tabscontainer1{
	padding:0px;
	float:left;
	left:0px;
	padding-bottom:10px;
}

.tabscontainer1:before{
	padding:0px;
	float:left;
	left:0px;
	padding-bottom:10px;
}
	
.taskTabs{
	width:auto;
	height:66px;
	border-radius:8px;
	display:inline-block;
	left:0px;
	margin-right:15px;
	margin-top:17px;
	}

.taskTabs p {
  display: inline-block;
  font-family: "Roboto Condensed",sans-serif;
  font-size: 17pt;
  margin: 0 !important;
  padding-left: 10px;
  padding-right: 16px;
  padding-top: 18px;
  vertical-align: middle;
}

.taskTab1{
	 border: 1px solid #4c9cfd;
  -webkit-box-shadow:0 0 0 5px #01101f;
  -moz-box-shadow:0 0 0 5px #01101f;
  -o-box-shadow:0 0 0 5px #01101f;
  box-shadow:0 0 0 5px #01101f;
	}
	
.taskTab2{
	 border: 1px solid #4c9cfd;
  -webkit-box-shadow:0 0 0 5px #01101f;
  -moz-box-shadow:0 0 0 5px #01101f;
  -o-box-shadow:0 0 0 5px #01101f;
  box-shadow:0 0 0 5px #01101f;
	}
	
.taskTab3{
	 border: 1px solid #4c9cfd;
  -webkit-box-shadow:0 0 0 5px #01101f;
  -moz-box-shadow:0 0 0 5px #01101f;
  -o-box-shadow:0 0 0 5px #01101f;
  box-shadow:0 0 0 5px #01101f;
	}
	
.taskIcons{
	background:url(http://s32.postimg.org/9jx6xtvk5/Task_Icon_Map.png) no-repeat;
	width:40px;
	height:39px;
	display:inline-block;
	margin-left:16px;
	margin-top:12px;
 vertical-align: middle;
	}
#taskIcon1{
	background-position: 0px 0px;	
	}
#taskIcon2{
	background-position: -42px 0px;	
	}
	
#taskIcon3{
	background-position: -84px 0px;		
	}
	

<div class="tabscontainer1">
<div class="taskTabs">

<div class="taskTabs taskTab1"> <span class="taskIcons" id="taskIcon1"> </span> <p>Tasks</p> </div>
<div class="taskTabs taskTab2"> <span class="taskIcons" id="taskIcon2"> </span> <p>Completed Tasks</p> </div>
<div class="taskTabs taskTab3"> <span class="taskIcons" id="taskIcon3"> </span><p>Deleted Tasks</p> </div>

</div>
</div>

Answer 3

我刚刚将以下内容添加到.taskTabs p{}

margin: 0; /* for good measure */
vertical-align: 9pt; /* roughly half the font-size */

https://jsfiddle.net/k9q0qhdj/3/