css用于将文本居中于div的中心

Question

.sidemenu {
  float: left;
  margin-top: 150px;
 
  height: 250px;
  width: 150px;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
}
.menu{
  height: 45px;
  width: 150px;
  text-align:left;
  margin-left:2px;
  
  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  text-align: left;
  padding: 0px 7px;
}

<div class="side">
                   <div class="sidemenu">
                        <div class="1 menu">
                          <a href="admin_dashboard.php" class="astext">Profile</a>
                        </div> <!--End of menu1 -->
                        <div class="2 menu">
                          <a href="clients.php" class="astext">Clients</a>
                        </div> <!--End of menu 2-->
                        <div class="3 menu">
                          <a href="employees.php" class="astext">Employees</a>
                        </div> <!--End of menu 3-->
                        <div class="menu 4">
                        <a href="admin_file_view.php" class="astext">Documents</a>
                        </div> <!--End of menu 4-->
                   </div> <!--End of side menu -->
                   </div>  <!--End of side div -->

我想在div标签的垂直中心显示文本。我尝试了margin-top：10px;但是我无法将文本居中。我附上了图片。菜单显示在左上角。但我想要将它显示在中间左侧，我将其标记为绿色。

Answer 1

添加等于div高度的line-height。

＆＃13;

＆＃13;

.sidemenu {
  float: left;
  margin-top: 150px;
 
  height: 250px;
  width: 150px;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
}
.menu{
  height: 45px;
  width: 150px;
  text-align:left;
  margin-left:2px;
  line-height: 45px;   /*   <---------- Added This */
  
  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  text-align: left;
  padding: 0px 7px;
}

＆＃13;

<div class="side">
                   <div class="sidemenu">
                        <div class="1 menu">
                          <a href="admin_dashboard.php" class="astext">Profile</a>
                        </div> <!--End of menu1 -->
                        <div class="2 menu">
                          <a href="clients.php" class="astext">Clients</a>
                        </div> <!--End of menu 2-->
                        <div class="3 menu">
                          <a href="employees.php" class="astext">Employees</a>
                        </div> <!--End of menu 3-->
                        <div class="menu 4">
                        <a href="admin_file_view.php" class="astext">Documents</a>
                        </div> <!--End of menu 4-->
                   </div> <!--End of side menu -->
                   </div>  <!--End of side div -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

简单的解决方案是设置菜单类的行高，如下所示：

.menu a{line-height:45px;}

否则，您可以使用css显示属性将其显示为表格单元格，并定义垂直对齐中心。

Answer 3

试试这个

.menu a{line-height:40px;}

Answer 4

您应该为链接添加行高，并将其设置为显示内联块，如：

.menu a {
    display: inline-block;
    height: 45px;
    line-height: 45px;
}

http://jsfiddle.net/Pik_at/dz07qrq8/

Answer 5

添加

a.astext {
  line-height:2.5em;
} 

你的代码工作正常。

.sidemenu {
  float: left;
  margin-top: 150px;
 
  height: 250px;
  width: 150px;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
}
.menu{
  height: 45px;
  width: 150px;
  text-align:left;
  margin-left:2px;
  
  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  text-align: left;
  padding: 0px 7px;
}
a.astext
{
line-height:2.5em;}

<div class="side">
                   <div class="sidemenu">
                        <div class="1 menu">
                          <a href="admin_dashboard.php" class="astext">Profile</a>
                        </div> <!--End of menu1 -->
                        <div class="2 menu">
                          <a href="clients.php" class="astext">Clients</a>
                        </div> <!--End of menu 2-->
                        <div class="3 menu">
                          <a href="employees.php" class="astext">Employees</a>
                        </div> <!--End of menu 3-->
                        <div class="menu 4">
                        <a href="admin_file_view.php" class="astext">Documents</a>
                        </div> <!--End of menu 4-->
                   </div> <!--End of side menu -->
                   </div>  <!--End of side div -->

Answer 6

您可以简单地使用：

.menu {
    display: table
}
.menu a {
    display: table-cell;
    vertical-align: middle;
}

<强> demo

Answer 7

将.menu的位置设置为相对位置，将.astext绝对位置设置为margin-top 10px

.menu{
  height: 45px;
  width: 150px;
  text-align:left;
  margin-left:2px;
  ...
  position:relative;
}


.menu a.astext{
    margin-top: 10px;
    position: absolute;
}

jsFiddle