CODEWITHSUNDEEP
htmlcss
byCoder
byCoder

Reputation: 9184

CSS: center text vertically in link

There are couple of tutorials about how to center text in a link vertically. But i didn't found any that matches my criteria:

    ul {
      list-style-type: none;
    }
    li {
      height: 40px;
      width: 160px;
      background: red;
      border-bottom: 1px solid green;
    }
    li a {
      line-height: 1;
    }
    li a em {
      width: 40px;
      height: 40px;
      float: left;
      display: inline-block;
      background: yellow;
    }
<ul>
  <li>
    <a><em></em>Text one line</a>
  </li>
  <li>
    <a><em></em>Text multile line Very Very long</a>
  </li>
</ul>

and so it looks:

enter image description here

but text in all this links must be centererd vertically, i can do it so:

li a{
        line-height: 40px;
    }

but then multiline text if positioned wrong.

How could i solve my problem?

http://jsfiddle.net/6qerbfjs/1/

Upvotes: 1

Views: 1459

Answers (6)

Anil Meenugu
Anil Meenugu

Reputation: 1431

this is a most crossbrowser solution

li {
    width           : 200px;
    line-height     : 100px;
    height          : 100px;
    border          : 1px blue solid;        
}
li span {
    display             : -moz-inline-box;  /* FF2 or lower */
    display             : inline-block;     /* FF3, Opera, Safari */
    line-height         : normal;
    vertical-align      : middle;    
}

li span     { *display  : inline;} /* haslayout for IE6/7 */

html

<ul>
   <li><span>My text</span></li>
   <li><span>My longer text</span></li>
   <li><span>My text, but this time is really wide</span></li>
   <li><span>My text, some thoughts about how much it will expand in this item.</span></li>
</ul>

Upvotes: 0

robjez
robjez

Reputation: 3788

There is a way way to do so, as per this jsFiddle

Method utilizes CSS transform property:

HTML: 

<ul>
    <li> 
       <a>Text one line</a>
    </li>
    <li> 
       <a>Text multile line Very Very longVery Very longVery Very longVery Very longVery Very longVery Very longText multile line Very Very longVery Very longVery Very longVery Very </a>
    </li>
</ul>

CSS: 

ul {
    list-style-type: none;
}
li {
    display: block;
    max-width: 500px;
    background: #433669;
    margin: 0 auto 1em;
    height: 140px;
    border-radius: .5em;
    color: white;
}
li a {
    display:inline-block;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

This solution is based on this article, with some small tweaks to fit your case.

Upvotes: 1

Denis
Denis

Reputation: 570

You could wrap your text in a <div> and tell to position li a as a table whereas your new <div> would be a table-cell. Then vertical-align: middle should work.

HTML:

<ul>
    <li>
        <a><em></em><div id="vcenter">Text one line</div></a>
    </li>
    <li>
        <a><em></em><div id="vcenter">Text multile line Very Very long</div></a>
    </li>
</ul>

CSS:

ul{
    list-style-type: none;
}
li{
    height: 80px;
    width: 160px;
    background: red;
    border-bottom: 1px solid green;
}

li a{
    line-height: 1;
    display: table;
}

#vcenter{
    display: table-cell;
    vertical-align: middle;
}

li a em{
   width: 40px;
   height: 80px;
   float: left;
   display: inline-block;
   background: yellow;
}

Here is a jsfiddle

Upvotes: 2

RWAM
RWAM

Reputation: 7018

If you can use a extra span around the text, then you can use an approach from https://css-tricks.com/centering-in-the-unknown/ to center the text.

<ul>
  <li>
    <a><em></em><span>Text one line</span></a>
  </li>
  <li>
    <a><em></em><span>Text multile line Very Very long</span></a>
  </li>
</ul>

And the css:

ul{
  list-style-type: none;
}
li{
  height: 40px;
  width: 160px;
  background: red;
  border-bottom: 1px solid green;
}

li a{
  line-height: 1;
}

li a em{
  width: 40px;
  height: 40px;
  display: inline-block;
  background: yellow;
  line-height: 100%;
  vertical-align: middle;
}

li a span {
  display: inline-block;
  line-height: 100%;
  vertical-align: middle;
  max-width: 120px;
}

See this fiddle.

Upvotes: 3

Mitul
Mitul

Reputation: 3427

Hello Please try bellow css

ul {
    list-style-type: none;
}
li {
    height: 40px;
    text-align:center;
    width: 160px;
    background: red;
    border-bottom: 1px solid green;
}
li a {
    line-height: 1;
}
li a em {
    width: 40px;
    height: 40px;
    float: left;
    display: inline-block;
    background: yellow;
}

Here is the working demo http://jsfiddle.net/yndxy8rz/

Upvotes: 0

Proxytype
Proxytype

Reputation: 722

try to work with percents:

<div id="linkContainer" style="width:1000px;height:300px">
<a href="#" style="position:relative;width:100%;height:80;top:10%">link</a>
</div>

Upvotes: 0

Related Questions