Photoshop Question posted in
The official user guide can be found here.

How to center a letter in a circle on a <li> – Photoshop

I’ve been stuck on this for a while. Please see image attached. I need to make a circle with a centered letter inside it and a line to text aligned centre to the circle. I need help with rest of the code. 

.lettercircle {
  font-family: Helvetica, sans-serif;
  background-color: #009cda;
  color: #fff;
  padding: 5px 12px;
  border-radius: 50%;
  font-size: 28px;
}
#div {
  width: 499px;
  height: 166px;
}
<div id="div">
  <ul>
    <li>	<span>A</span>
      DREAMWEAVER
    </li>
    <li>	<span>B</span>
      PHOTOSHOP
    </li>
  </ul>
</div>

enter image description here

Tags:

2

Answers


  1. 0

    I think you just forgot to add your class to your spans.

       .lettercircle {
     font-family: Helvetica, sans-serif;
     background-color: #009cda;
     color: #fff;
     padding: 5px 12px;
     border-radius: 50%;
     font-size: 28px;
   }
   #div {
     width: 499px;
     height: 166px;
   }
    <div id="div">
  <ul>
    <li> <span class="lettercircle">A</span>
      DREAMWEAVER
    </li>
    <li> <span class="lettercircle">B</span>
      PHOTOSHOP
    </li>
  </ul>
</div>
    Login or Signup to reply.
  2. 0

    How about this: 

    .lettercircle {
  font-family: Helvetica, sans-serif;
  background-color: #333;
  color: #fff;
  padding: 5px 9px;
  border-radius: 50%;
  font-size: 12px;
  display: table-cell;
  vertical-align: middle;
}
.title {
  padding-left: 10px;
  display: table-cell;
  vertical-align: middle;
}
#div {
  width: 499px;
  background: red;
  height: 100%;
  padding: 10px;
}
#div > ul {
  padding: 0;
  display: table-cell;
  vertical-align: middle;
}
#div > ul > li {
  list-style: none;
  padding: 10px;
  font-family: Helvetica, sans-serif;
  text-transform: uppercase;
  display: table;
}
    <div id="div">
  <ul>
    <li>
      <span class="lettercircle">A</span>  
      <span class="title">DREAMWEAVER</span>
    </li>
    <li> 
      <span class="lettercircle">B</span>  
      <span class="title">PHOTOSHOP</span> 
    </li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search