center svg on a

Question

center svg on a

Navigation

#1 by (3 votes)

3

Hello to everyone! I've been trying for a while but there's no way to do it, I try to center a vector object (svg) on a link 'a' and there's no way guys .. When you enlarge the page or make it smaller the svg goes out of 'a' instead of stay inside the 'a'.

botones-reserva{
   width: 100%;
   height: 70px;
   margin-top: 12px;
   position: relative;
   vertical-align: center;
   display: inline-block;
   text-align: center;


   
}

#botones-reserva a{
   text-decoration: none;
   width: 22%;
   height: 43px;
   margin: 4px 1% 4px 1%;
   text-align: center;
   position: relative;
   display: inline-block;
   background-color: #CCB489;
   border-radius: 8px;
   box-shadow: 0px 0px 30px #4C2B14;
}

#botones-reserva a:after{
   position: relative;
   font-family: 'icomoon';
   color:#4C2B14;
   font-size: 17vw;
   bottom:10px;
   text-align: center;
   
   
}
#botones-reserva a:nth-child(1):after{
   
   content:"\e927";

}

#botones-reserva a:nth-child(2):after{
   
   content:"\e936";

}

#botones-reserva a:nth-child(3):after{
   
   content:"\e902";

}

#botones-reserva a:nth-child(4):after{
   
   content:"\e92e";

}

<article id="botones-reserva">
      <div>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
      </div>
   </article>

html5 css3 svg

asked by Isaac Martí 21.09.2018 в 17:32

source

1 answer

Regex to replace special characters - JAVA jquery writing time

score 3 · Accepted Answer

Let's see if I understand, you want it to look like this:

But it is looking like this:

This happens because in the css of the tag a you are giving a heigth in px, leave it in heigth: auto:

#botones-reserva a{
   text-decoration: none;
   width: 22%;
   height: auto;
   margin: 4px 1% 4px 1%;
   text-align: center;
   position: relative;
   display: inline-block;
   background-color: #CCB489;
   border-radius: 8px;
   box-shadow: 0px 0px 30px #4C2B14;
}

I hope I have understood and helped you.