CSS:您可以在图例集中在左边界居中的图例中吗? [英] CSS: Can You positiion a legend inside a fieldset on the left border centered?
本文介绍了CSS:您可以在图例集中在左边界居中的图例中吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试获取一个图例并将其附加到左边框.我想垂直显示它.这可能吗?参见下面的示例
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
左边框应如下所示:
__________________________________
|
|
|
Some Text here
|
|
|
|__________________________________
推荐答案
您可以完全定位图例,然后使用过渡进行略微校正.CSS如下所示(向字段集中添加了左填充,因此内容不会与图例重叠):
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):
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>
这篇关于CSS:您可以在图例集中在左边界居中的图例中吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文