CODEWITHSUNDEEP
htmlcss
user3386779
user3386779

Reputation: 7205

css for centering the text in center of the div

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

I want to display the the text in vertical center of the div tag.I tried for margin-top:10px;but I cant center the text.I attached the image.The menu displayed in top left.But I want to display it in center left where I marked it in green color. enter image description here

Upvotes: 1

Views: 95

Answers (7)

priya786
priya786

Reputation: 1834

Add a 

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

to your code it works fine.

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

Upvotes: 1

Prasad G K
Prasad G K

Reputation: 136

Simple solution will be setting the line height for menu class like below:

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

else you can display that as table cell using css display property and defining the vertical-align center.

Upvotes: 2

Mofarjul Molla
Mofarjul Molla

Reputation: 114

You can simply use : 

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

demo

Upvotes: 1

Ich
Ich

Reputation: 226

set the position of .menu to relative and position of .astext absolute with 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

Upvotes: 1

Anupam Basak
Anupam Basak

Reputation: 1523

Add a line-height equal to the height of the div.

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

Upvotes: 2

Pik_at
Pik_at

Reputation: 1457

You should add an line-height to your link and set him to display inline-block like:

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

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

Upvotes: 1

G&#246;kalp Demirbağ
G&#246;kalp Demirbağ

Reputation: 108

try this

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

Upvotes: 1

Related Questions