代码之家 › 专栏 › 技术社区 › YakovL Anatol Belski

文本区域中的垂直文本与普通文本对齐

vertical-alignment css html

YakovL Anatol Belski · 技术社区 · 6 年前

我正试图创建一个表,其中一行有两个单元格,第二个单元格包含一行文本区域,以便文本与第一个单元格中的文本垂直对齐: 我注意到,在Chrome中,对FF足够有效的CSS失败(实际上,它还取决于浏览器缩放级别),我需要a 一致性 方法来实现这一点。

为了提供mcve,我创建了以下HTML:。

td,td文本区域{
字体系列:serif;
字体大小:15px;
}
表,tr,td,文本区域{
边界:无;
}
技术发展部{
向左填充:0.5em;
向右填充:0.5em;
}<table><tbody><tr>
<td>文本</td>
<td><textarea>可编辑文本lt;/textarea></td>
</tr></tbody></table>

<脚本>
//在实际情况下,此代码位于输入事件的处理程序内
//用于改变行数时调整高度
var txt=document.queryselector(“文本区域”);
txt.style.height='1px';
txt.style.height=txt.scrollheight+'px';
</script>>=



正如您所看到的,它并没有按预期工作,但也没有太多的CSS,所以各种填充都依赖于浏览器。现在,我可以想到“修复”这一点:指定垂直填充并vertical-alignfor cells,removepadding topfor textarea..下面的代码片段在单独的HTML中对我很有用:




td,td文本区域{
字体系列:serif;
字体大小:15px;
}
表,tr,td,文本区域{
边界:无;
}
技术发展部{
填充:0.5em;
垂直对齐:中间;
}
文本区域{
填充:0;
}<table><tbody><tr>
<td>文本</td>
<td><textarea>可编辑文本lt;/textarea></td>
</tr></tbody></table>

<脚本>
//在实际情况下,此代码位于输入事件的处理程序内
//用于改变行数时调整高度
var txt=document.queryselector(“文本区域”);
txt.style.height='1px';
txt.style.height=txt.scrollheight+'px';
</script>>=



。但它在我的初始上下文中不起作用,而且它在so snippet中也不起作用!右,设置display:blockfortextareafixes this in so snippet:。




td,td文本区域{
字体系列:serif;
字体大小:15px;
}
表,tr,td,文本区域{
边界:无;
}
技术发展部{
填充:0.5em;
垂直对齐:中间;
}
文本区域{
填充:0;
显示:块;
}<table><tbody><tr>
<td>文本</td>
<td><textarea>可编辑文本lt;/textarea></td>
</tr></tbody></table>

<脚本>
//在实际情况下,此代码位于输入事件的处理程序内
//用于改变行数时调整高度
var txt=document.queryselector(“文本区域”);
txt.style.height='1px';
txt.style.height=txt.scrollheight+'px';
</script>>=



但仍然如此!这在so处提供了完美的对齐方式(垂直“padding”在顶部和底部是相同的):。



但在我最初的上下文中,它不是那么好:



我很困惑,我还能错过什么?
我注意到,在Chrome中运行良好的CSS在FF中失败(实际上,它还取决于浏览器的缩放级别),我需要一个一致的实现这一点的方法。

为了提供一个mcve,我创建了这个html:



td, td textarea {
	font-family: serif;
	font-size: 15px;
}
table, tr, td, textarea {
	border: none;
}
td {
	padding-left:	0.5em;
	padding-right:	0.5em;
}
<table><tbody><tr>
    <td>text</td>
    <td><textarea>editable text</textarea></td>
</tr></tbody></table>

<script>
// in the real case, this code is inside a handler of the input event
// which is meant to adjust height when the number of lines is changed
var txt = document.querySelector('textarea');
txt.style.height = '1px';
txt.style.height = txt.scrollHeight+'px';
</script>




正如您所看到的,它并没有按预期工作,但也没有太多的CSS,所以各种填充都依赖于浏览器。现在,我可以考虑“修复”这个问题:指定垂直填充和vertical-align对于单元格,删除padding-top对于文本区域..下面的代码片段在单独的HTML中对我很有用:



td, td textarea {
	font-family: serif;
	font-size: 15px;
}
table, tr, td, textarea {
	border: none;
}
td {
	padding: 0 0.5em;
	vertical-align: middle;
}
textarea {
	padding: 0;
}
<表><tbody><tr>
<td>文本</td>
<td><textarea>可编辑文本lt;/textarea></td>
</tr></tbody></table>

<脚本>
//在实际情况下,此代码位于输入事件的处理程序内
//用于改变行数时调整高度
var txt=document.queryselector(“文本区域”);
txt.style.height='1px';
txt.style.height=txt.scrollheight+'px';
</script>




但是它在我最初的上下文中不起作用,而且在这么一个片段中也不起作用!右,设置display: block对于textarea在so片段中修复此问题:



td, td textarea {
	font-family: serif;
	font-size: 15px;
}
table, tr, td, textarea {
	border: none;
}
td {
	padding: 0 0.5em;
	vertical-align: middle;
}
textarea {
	padding: 0;
	display: block;
}
<表><tbody><tr>
<td>文本</td>
<td><textarea>可编辑文本lt;/textarea></td>
</tr></tbody></table>

<脚本>
//在实际情况下,此代码位于输入事件的处理程序内
//用于改变行数时调整高度
var txt=document.queryselector(“文本区域”);
txt.style.height='1px';
txt.style.height=txt.scrollheight+'px';
</script>




但仍然如此!这在so处提供了完美的对齐方式(顶部和底部的垂直“填充”相同):



但在我最初的背景下,它并没有那么好:



我很困惑,我还能错过什么?

1 回复 | 直到 6 年前

YakovL Anatol Belski 6 年前

{ }(二)


   
//考虑填充:
padding top=computedStyle.getPropertyValue('padding-top'),
padding=parsefloat(paddingtop)+parsefloat(paddingbottom);

var effectiveHeight=this.scrollHeight-padding;
}(二)

textarea为了这个。高度height属于scrollHeight



你好!

bordervertical-align: middle;

PPS更好:不是取消填充(我在悬停时使用着色背景,这样零填充看起来不好),而是input

var adjustHeightToContent = function()
{
    var defaultHeight = 10;
    var maxHeight = 150;
    jQuery(this).height(defaultHeight); // needed to descrease the height
    jQuery(this).height(Math.min(this.scrollHeight , maxHeight));
};
jQuery('.dataEditor').on('input',adjustHeightToContent);


但是使用this suggestion

var adjustHeightToContent = function()
{
    var defaultHeight = 10,
        maxHeight = 150;
    // take padding into account:
    var computedStyle = window.getComputedStyle(this, null),
        paddingTop = computedStyle.getPropertyValue('padding-top'),
        paddingBottom = computedStyle.getPropertyValue('padding-bottom'),
        padding = parseFloat(paddingTop) + parseFloat(paddingBottom);

    jQuery(this).height(defaultHeight); // needed to descrease the height
    var effectiveHeight = this.scrollHeight - padding;
    jQuery(this).height(Math.min(effectiveHeight, maxHeight));
};