垂直居中文本，带有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

试试这个垂直对齐：

 .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; } 

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