CSS:你可以在左边框的中心位置居中设置传奇吗?

时间:2016-08-23 15:32:21

标签: css css3 sass less

我正在尝试传奇并将其附加到左边框。我想垂直显示它。这可能吗? 请参阅下面的示例

左边框应如下所示:

__________________________________
|
|
|
Some Text here
|
|
|
|__________________________________

1 个答案:

答案 0 :(得分:0)

您可以绝对定位图例,然后使用转换稍微修正。 CSS看起来像这样(左边的填充添加到字段集中,因此内容不会与图例重叠):

<强> CSS

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

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

<强> HTML

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