CSS Layout How to - Center link in a circle

Question

We would like to know how to center link in a circle.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.container {<!--from   w w  w .j  a  v  a2s  . co m-->
  position: relative;
  width: 300px;
  height: 100px;
  background-color: #EEEEEE;
  padding: 0px;
}

.circle {
  position: absolute;
  left: 42%;
  top: 28%;
  height: 1.25em;   /** 20px / 16px = 1.25em **/
  width: 1.25em;    /** 20px / 16px = 1.25em **/
  padding: 0.75em;  /** 12px / 16px = 0.75em  **/
  border-radius: 1.375em;
  background-color: red;
  color: #FFF;
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.4);
  text-align: center;
}

.circle>a {
  color: #FFF;
  text-decoration: none;
  font-size: 2.5em;
  font-weight: bold;
  line-height: 50%;
}
</style>
</head>
<body>
  <div class="container">
    <div class="circle">
      <a href="#">+</a>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: