0

I've created this color picker label and would like to place the text in the middle of it. Any thoughts on how to make it work with CSS?

Color picker example: https://jsfiddle.net/heyjs/e1sqydjm/6/

I tried text-align: center; and vertical-align: middle; but it doesn't work. I would like the text label to be in the middle of the circle.

Adrian
  • 15
  • 2

1 Answers1

2

I hope this will help you. use display:flex property for that

https://jsfiddle.net/ponsiva/n4q7zfe2/3/

#colorpick {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.colorpick-label {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: turquoise;
  border: 1px solid grey;
  display: flex;
  align-items: center;
  justify-content: center;
}

.colorpick-label:hover,
#colorpick:focus+.colorpick-label {
  border-color: black;
}

#colorpick:active+.colorpick-label {
  filter: brightness(90%);
}
<div class="color-picker">
  <input type="color" id="colorpick" name="colorpick" value="#55aaff">
  <label for="colorpick" class="colorpick-label">Select a color:</label>
</div>
Ponsiva
  • 944
  • 4
  • 15