[英]How to align button by vertically in div using JQuery/CSS?
有以下代码:
<table>
<tr>
<td class="first_column">Sign in</td>
<td class="second_column">->(1)</td>
<td class="third_column"><div class="translated">Some text</div></td>
</tr>
</table>
$(".translated").mouseenter(function(){
if ($(this).hasClass("editable")){
return;
}
var h=$(this).height();
var w=$(this).width();
$(this).empty();
var field = $("<input/>", {
type: "text",
value:$(this).text()
}).appendTo(this);
var button = $("<button></button>").appendTo(this);
field.height(h - field.outerHeight()+field.height());
button.height(h-button.outerHeight()+button.height());
$(this).height(h);
$(this).width(w);
$(this).addClass("editable");
});
.translated
{
color:green;
font-weight:bold;
vertical-align:middle;
width:100%;
}
当鼠标将div对准div时,此代码将输入和按钮项添加到div容器中。 但是存在以下问题-按钮的高度合适,但是对齐不正确。 我需要一个新的按钮项垂直位于行的中心。 请告诉我,我该怎么办?
您必须在js代码中设置按钮宽度:
button.css('width', field.width());
试试这个小提琴: http : //jsfiddle.net/velthune/NCrUu/5/
我清理了代码,添加了表格行,并设置了输入和按钮的宽度。 它们的不同之处在于浏览器为这些元素提供了空白和边距
http://jsfiddle.net/andreaslyngstad/BFwU7/
的HTML
<table>
<tr>
<td class="first_column">Sign in</td>
<td class="second_column">->(1)</td>
<td class="third_column">
<div class="translated">Some text</div>
</td>
</tr>
<tr>
<td class="first_column"></td>
<td class="second_column"></td>
<td class="third_column" id="button_container"></td>
</tr>
</table>
的CSS
table{
width:100%
}
button{
width:100px
}
input{
width:96px
}
.translated {
color:green;
font-weight:bold;
vertical-align:middle;
width:100%;
}
JS
var field = $("<input/>", {
type: "text",
value: $(this).text()
})
var button = $("<button>sign in</button>")
$(".translated").mouseenter(function() {
$(this).empty();
field.appendTo(this);
button.appendTo($("#button_container"));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.