Portal_Zii Portal_Zii - 6 months ago 15
HTML Question

Vertically center text with icon inside div-button

I am making some buttons for a project and am having an issue getting the text in the buttons to be vertically centered. I imagine i would just set a negative margin to the

<p>
element but its not working like I thought it would.

enter image description here

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

Thanks!

Answer

Add vertical-align: middle; For 'P'tag and icon 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>