CODEWITHSUNDEEP
htmlhyperlinkcenter
Maher Tliba
Maher Tliba

Reputation: 491

How to center a link in a <div>

I need help to center a link in a div. horizontal and vertical align, I dont know how it works I test multiple possibilities but I failed. 

.Menu {

height:81px;
left : 0px;
right : 0px;

border:1px solid #727272;
border-radius:9px;
-webkit-border-radius:9px;
box-shadow: 1px 1px 6px #333;

background-color: #FFFFFF;

margin:5%;
vertical-align:middle;
padding-left : 25%;
}


    .Picto {
position:absolute;
left : 7%;
height:42pt;
width:42pt;
}


a {
text-decoration : none;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:36px;
color: #666;
}

html :

<a href="trav.html"><div class="Menu" style="display:none;" id="Trav"><img src="img/trav.png" alt="Travaux" class="Picto"/>Travaux</div></a>
        <a href="arbo.html"><div class="Menu" style="display:none;" id="Equi"><img src="img/arbo.png" alt="Equipements" class="Picto"/> Equipements</div></a>

Thanks in advance.

Regards

Upvotes: 0

Views: 99

Answers (2)

Sanjay Gohil
Sanjay Gohil

Reputation: 144

try this 

.Menu {
    height:81px;
    line-height:81px;
    text-align-center; 
  }

for vertical align middle

line-height and height same amount

for horizantal align center

use text-align

for image and text align middle use

vertical-align:middle in image class

Upvotes: 1

Harrison Wall
Harrison Wall

Reputation: 1

if I remember correctly in your CSS try content-align:center. this is what I have used in every web page I have made and it has worked every time, also you would be better off with posistion:relative instead of position:absolute

Here is an example http://jsfiddle.net/Lm11a0we/

Upvotes: 0

Related Questions