Brian Bier Brian Bier - 10 months ago 96
Less Question

CSS: Can You positiion a legend inside a fieldset on the left border centered?

I am trying to take a legend and attach it to the left border. I want to display it center vertically. Is this Possible?
See the example below

Left border should look like this:

Some Text here


You can absolutely position the legend, and then use a transition to correct slightly. The CSS looks like this (left padding added to the fieldset so the content doesn't overlap the legend):


fieldset {
  position: relative;
  padding-left: 50px;

legend {
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);


<form action="test.php" method="post">
    <input type="radio" id="radio"> <label for="radio">Click me</label>
         <label for="name">Text Input:</label>
         <input type="text" name="name" id="name" value="" tabindex="1" />