I have a canvas with height of 480. I am using Easeljs to load images in canvas . Each row contains 3 images. The images loaded beyond the height of canvas(480) are hidden. I need to add vertical scrollbar to view those images. How can i implement this.
thanks,
sathya
Here is how to add a vertical scrollbar to canvas that allows scrolling up/down over a larger image: http://jsfiddle.net/m1erickson/a9KDB/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
body{ background-color: ivory; }
div, canvas {
position:absolute;
}
.wrapper {
top:10px;
left:10px;
width: 300px;
height: 300px;
border: 2px solid black;
margin:30px 0 2;
overflow: hidden;
background-color:green;
}
.vertical-scroll {
left:320px;
top:10px;
border: 1px solid green;
width: 20px;
height: 300px;
}
.vertical-scroll div.bar {
left:0px;
top:0px;
width: 20px;
background-color: blue;
height: 20px;
}
#mycanvas {
left:0px;
top:0px;
}
</style>
<script>
$(function(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var wrapper;
var canvasHeight;
var vScrollHeight;
var canvasWrapperHeight=300;
$(".bar").draggable({
containment: "parent"
});
$(".bar").on("drag", function (event, ui) {
var ctop=(-ui.position.top * canvasHeight / canvasWrapperHeight);
canvas.style.top = ctop + "px"
});
var img=new Image();
img.onload=function(){
canvas.width=this.width;
canvas.height=this.height;
canvasHeight=this.height;
vbarHeight=canvasWrapperHeight*canvasWrapperHeight/canvasHeight;
document.getElementById("vbar").style.height=vbarHeight+"px";
ctx.drawImage(this,260,0,300,this.height,0,0,300,this.height);
}
img.src="http://sciencedude.blog.ocregister.com/files/2008/02/zot1-copy.jpg";
}); // end $(function(){});
</script>
</head>
<body>
<div class="wrapper" id="wrap1">
<canvas id="mycanvas" width="300px" height="300px" />
</div>
<div class="vertical-scroll" id="vscroll">
<div class="bar" id="vbar"></div>
</div>
</body>
</html>
wrap the canvas with a div, then set a height for the div, and finally apply overflow-y:auto and overflow-x: hidden property to the div.
overflow-y:auto shows the vertical scrollbar when needed
overflow-x: hidden hides the horizontal scrollbar
http://jsfiddle.net/V92Gn/3509/
<div style="height:200px;width:480px; overflow-y:auto;overflow-x: hidden;">
<canvas id="canvas" style="background:navy" width="480" height="820"></canvas>
</div>
I don't know about any ScrollBar-Solutions for EaselJS and it's not possible to do this via HTML.
So you would have to code your own scrollbar, if you have trouble with that, there should be a quite a few tutorials for that to be found online for ActionScript3 you can easily adapt those for EaselJS.
Another option would be to extend the height of the canvas itself and add a scrollbar to it's parent container, I'm not sure though if that'd be a very good solution.
Related
I have an iframe border using CSS. As the page is resized the border sometimes disappears in Chrome and changes size in Safari (it's fine in Firefox)
Is there a known workaround?
const html = `
<style>
body {
background: #DDD;
}
</style>
<body>
<div>hello iframe</div>
</body>
`;
const blob = new Blob([html], {type: 'text/html'});
document.querySelector("iframe").src = URL.createObjectURL(blob);
div {
max-width: 90%;
margin: 0 auto;
}
iframe {
display: block;
border: 1px solid black;
width: 100%;
background: red;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<iframe></iframe>
</div>
Using other elements don't have the same issue
div {
max-width: 90%;
margin: 1em auto;
}
span, canvas {
display: block;
border: 1px solid black;
width: 100%;
height: 60px;
background: #eee;
}
<p>no issue with other elements</p>
<div>
<span></span>
</div>
<div>
<canvas></canvas>
</div>
note that it seems to have something to do with having a background color in the iframe. If I remove the background color the problem goes away in Chrome (though not Safari)
const html = `
<body>
<div>hello iframe</div>
</body>
`;
const blob = new Blob([html], {type: 'text/html'});
document.querySelector("iframe").src = URL.createObjectURL(blob);
div {
max-width: 90%;
margin: 0 auto;
}
iframe {
display: block;
border: 1px solid black;
width: 100%;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<iframe></iframe>
</div>
Adding a wrapper div with overflow: hidden; and box-sizing: border-box; works for me.
const html = `
<style>
body {
background: #eee;
}
</style>
<body>
<div>hello iframe</div>
</body>
`;
const blob = new Blob([html], {type: 'text/html'});
document.querySelector("iframe").src = URL.createObjectURL(blob);
div {
max-width: 90%;
margin: 0 auto;
}
.iframe-wrapper {
border: 1px solid black;
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
iframe {
display: block;
width: 100%;
border: none;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<div class="iframe-wrapper">
<iframe></iframe>
</div>
</div>
I still see the issue on Chrome (not on Safari). It seems like a bug in visualization of the border (still).
One option could be to change the border to have a width of 0 and set an outline instead. Then this effect goes away. I don't know if it would be the best solution (outlines are used often to highlight focused/active elements), but it would be close to what you have.
Here is a demo just with that change:
const html = `
<style>
body {
background: #eee;
}
</style>
<body>
<div>hello iframe</div>
</body>
`;
const blob = new Blob([html], {type: 'text/html'});
document.querySelector("iframe").src = URL.createObjectURL(blob);
div {
max-width: 90%;
margin: 0 auto;
}
iframe {
display: block;
border: 0;
outline: 1px solid black;
width: 100%;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<iframe></iframe>
</div>
This is an antialiasing issue.
Chrome generally avoids rendering on floating pixels, to avoid antialiasing. It will try to move and resize to the next rounded pixels.
In this case, it will cut off your border instead of making it leak outside of the iframe.
You can force it by either moving or resizing your iframe by floating-pixels:
const html = `
<style>
body {
background: #DDD;
}
</style>
<body>
<div>hello iframe</div>
</body>
`;
const iframe = document.querySelector("iframe");
iframe.srcdoc = html;
document.querySelector("input").oninput = function(e) {
iframe.style.marginLeft = this.value + 'px';
};
div {
max-width: 90%;
margin: 0 auto;
}
iframe {
display: block;
border: 1px solid black;
width: 250.5px; /* force a floating pixel width */
background: red;
}
<p>Edit the range and watch the right border</p>
<input type="range" min="0" max="1" value="0" step="0.01">
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<iframe></iframe>
</div>
I think you did good opening this issue, since it's definitely not the expected behavior.
And since you asked for a workaround, here is one, far from being perfect, which will cause double reflows at each resize event, but which should fix the bug...
const html = `
<style>
body {
background: #DDD;
}
</style>
<body>
<div>hello iframe</div>
</body>
`;
const iframe = document.querySelector("iframe");
iframe.srcdoc = html;
addEventListener('resize', resizeFrame, {passive: true});
resizeFrame();
function resizeFrame(_){
iframe.style.width = null; // reset to 100%
// force reflow by calling offsetWidth which is already rounded
iframe.style.width = iframe.offsetWidth + 'px';
}
div {
max-width: 90%;
margin: 0 auto;
}
iframe {
display: block;
border: 1px solid black;
width: 100%;
background: red;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<iframe></iframe>
</div>
But note that this code only takes care of resize events, if your iframe can resize from other events (e.g DOM manips, CSS etc.) then you might want to use a wrapper element on which you'd apply the width:100% and from a ResizeObserver's callback change your iframe's width:
const html = `
<style>
body {
background: #DDD;
}
</style>
<body>
<div>hello iframe</div>
</body>
`;
const iframe = document.querySelector("iframe");
iframe.srcdoc = html;
if(window.ResizeObserver) {
const observer = new ResizeObserver(entries => {
iframe.style.width = iframe.parentNode.offsetWidth + 'px';
});
observer.observe(iframe.parentNode);
}
else {
console.log('no support');
}
div {
max-width: 90%;
margin: 0 auto;
}
iframe {
display: block;
border: 1px solid black;
width: 100%;
background: red;
}
.iframe-wrapper {
max-width: none;
width: 100%;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<div class="iframe-wrapper">
<iframe></iframe>
</div>
</div>
That is, in Blink only for now...
For anyone looking for an answer to this in 2022 and none of the above works, this is the only thing that worked for me.
Add the following CSS to the iframe:
clip-path: polygon(1% 1%, 99% 1%, 99% 99%, 1% 99%);
.ifrmoutr{
border: 1px solid red;
width:100%;
overflow:hidden;
}
.ifrmoutr iframe{
width:100%;
}
<div class="row">
<div class="col-lg-12">
<div class="ifrmoutr">
<iframe></iframe>
</div>
</div>
</div>
This question already has answers here:
Creating a hole in a <div> element
(10 answers)
Closed 7 years ago.
So say I have the following HTML structure:
<canvas></canvas>
<div class="overLay">
<button>Click me!</button>
</div>
The canvas is absolutely positioned with a negative z index, so the overlay is positioned over it (I have that much working). The issue is that I want the overlay div to have a white background, but the button to have a transparent background and show through to the canvas/body background color.
background-color:rgba(0,0,0,0);
doesn't work because it just shows the white background behind it. Any ideas on how to accomplish this effect?
The question this may have been marked as a potential duplicate of fails to account for the fact that buttons can have properties such as border-radius and offers no suitable solutions.
There's no way to create a hole inside an HTML element. A Transparent background can only be applied to an element that does not descend from a parent that has a non-transparent background.
What you could do, thought it's a little bit more complicate, is to create divs around your button, at it's same level, as siblings. Give those divs a white background, and then your transparent button should work.
I've created a sample using a table layout, where the button remains in the middle row, in the center cell. See that the button reveals the canvas background color:
canvas {
width: 200px;
height: 200px;
background: purple;
position: absolute;
z-index: -1;
}
.overLay {
width: 200px;
height: 200px;
display: table;
}
.overLay button {
background-color: Transparent;
white-space: nowrap;
}
.overLay > div {
display: table-row;
}
.overLay > .middle {
height: 1px;
}
.overLay > div > div {
display: table-cell;
text-align: center;
}
.overLay > .middle > div:nth-child(2) {
width: 1px;
}
/* Now, set the background on the divs around the button */
.top, .left, .right, .bottom {
background: white;
}
<canvas></canvas>
<div class="overLay">
<div class="top">
<div></div>
<div></div>
<div></div>
</div>
<div class="middle">
<div class="left"></div>
<div>
<button>Click me!</button>
</div>
<div class="right"></div>
</div>
<div class="bottom">
<div></div>
<div></div>
<div></div>
</div>
</div>
Since in my original answer, you pointed the intention of using a border radius. So there's another approach to make this possible.
Based on this asnwer
Make the overlay with a gradient radius background, that creates the gradient color center in the position where you want the button to be, at the button's size. Make the outer color as white, and the inner color as Transparent;.
Then, set your button's position. (I did this by centering it in a table layout):
canvas {
width: 200px;
height: 200px;
background: purple;
position: absolute;
z-index: -1;
}
.overLay {
width: 200px;
height: 200px;
display: table;
background-color: white;
background: -webkit-radial-gradient(50% 50%, circle, transparent 25px, white 0px);
background: radial-gradient(50% 50%, circle, transparent 25px, white 0px);
}
.overLay > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
button {
background-color: transparent;
border-radius: 50%;
width: 50px;
height: 50px;
position: relative;
}
<canvas></canvas>
<div class="overLay">
<div>
<button>Click me!</button>
</div>
</div>
Mmm..., have you thought about using an SVG element with a mask. That should do the trick. Take a look at the snippet.
body {
padding: 0;
margin: 0;
}
.your-canvas {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
button {
width: 150px;
height: 100px;
background-color: transparent;
color: white;
cursor: pointer;
}
<div class="your-canvas">
<img width="512" alt="Weingarten Kuppel 8" src="//upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Weingarten_Kuppel_8.jpg/512px-Weingarten_Kuppel_8.jpg"/>
</div>
<svg height="324" width="512">
<defs>
<mask id="mask">
<rect width="512" height="324" fill="white"/>
<rect x="181" y="112" width="150" height="100" fill="black"/>
</mask>
</defs>
<rect width="512" height="324" style="fill:rgba(255,0,0,.6);" mask="url(#mask)"/>
<foreignObject class="node" x="181" y="112" width="150" height="100">
<body xmlns="http://www.w3.org/1999/xhtml">
<button>Click Me</button>
</body>
</foreignObject>
</svg>
As far as i know it is even possible to use masking in pure css, but haven't had the time to look it up. Here is some information on using masks with svg Clipping and masking.
Have fun.
You could...
Reduce a canvas element to button size (== a button-canvas!),
Use CSS to position the button-canvas as desired over the div,
Add a click event listener on the canvas,
Draw whatever design you need on the button-canvas.
This way you have complete flexibility using the amazing drawing tools available with the canvas element.
Here's example code and a (fanciful) Demo.
While this demo is just for fun, you can easily restyle this example & turn it into a reusable widget:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var width=80;
var height=40;
var borderwidth=4;
var x=0;
var y=0;
x+=borderwidth;
y+=borderwidth/2;
var w=width-borderwidth-borderwidth;
var h=height-borderwidth;
var depth=5;
//
var stopCount=8;
var angle=0;
var angleDelta=360;
//
var labelColor='black';
canvas.width=width;
canvas.height=height;
requestAnimationFrame(animate);
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseUp(e);});
function makeGradient(){
var g=ctx.createLinearGradient(0,0,cw,0);
for(var i=0;i<stopCount;i++){
var stop=i/stopCount;
var hslDegrees=(angle+angleDelta*stop)%360;
var hsl="hsl(" + hslDegrees + ",100%, 50%)"
g.addColorStop(stop,hsl);
}
return(g);
}
function animate(){
ctx.clearRect(0,0,cw,ch);
gradientBorder();
ctx.font='12px verdana';
ctx.fillStyle=labelColor;
ctx.fillText('Click Me',x+10,y+25);
angle++;
requestAnimationFrame(animate);
}
//
function gradientBorder(){
var lw=ctx.lineWidth
var ss=ctx.strokeStyle;
ctx.lineWidth=borderwidth;
ctx.strokeStyle=makeGradient();
//
ctx.beginPath();
ctx.moveTo(x+w-depth,y);
ctx.lineTo(x+depth,y);
ctx.bezierCurveTo( x-depth/2,y+h*1/6, x+depth*2,y+h*2/6, x,y+h/2);
ctx.bezierCurveTo( x+depth*2,y+h*4/6, x-depth/2,y+h*5/6, x+depth,y+h);
ctx.lineTo(x+w-depth,y+h);
ctx.bezierCurveTo( x+w+depth/2,y+h*5/6, x+w-depth*2,y+h*4/6, x+w,y+h/2);
ctx.bezierCurveTo( x+w-depth*2,y+h*2/6, x+w+depth/2,y+h*1/6, x+w-depth,y);
ctx.closePath();
ctx.stroke();
//
var b2=borderwidth/2;
ctx.beginPath();
ctx.moveTo(x+w-depth-1,y+b2);
ctx.lineTo(x+depth+2,y+b2);
ctx.bezierCurveTo( x-depth/2+b2+2,y+h*1/6+1, x+depth*2+b2,y+h*2/6, x+b2+1,y+h/2);
ctx.bezierCurveTo( x+depth*2+b2,y+h*4/6+1, x-depth/2+b2+1,y+h*5/6, x+depth+b2-2,y+h-b2);
ctx.strokeStyle='#666';
ctx.lineWidth=0.50;
ctx.moveTo(x+depth+b2-2,y+h-b2);
ctx.lineTo(x+w-depth-2,y+h-b2);
ctx.bezierCurveTo( x+w+depth/2-b2-2,y+h*5/6, x+w-depth*2-b2+1,y+h*4/6, x+w-b2-2,y+h/2);
ctx.bezierCurveTo( x+w-depth*2-b2+1,y+h*2/6, x+w+depth/2-b2-2,y+h*1/6, x+w-depth-b2+3,y+b2);
ctx.strokeStyle='#666';
ctx.lineWidth=0.50;
ctx.stroke();
//
ctx.strokeStyle=ss;
ctx.lineWidth=lw;
ctx.fillStyle='gainsboro';
ctx.fill();
}
function handleMouseDown(e){ labelColor='red'; }
function handleMouseUp(e){ labelColor='black'; }
body{ background-color:white; }
.demo{
width:200px;
height:100px;
border:1px solid red;
position:relative;
}
#canvas{
position:absolute;
left:10px;
top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='demo'>
<canvas id="canvas"></canvas>
</div>
This question already has answers here:
set content height 100% jquery mobile
(8 answers)
Closed 8 years ago.
I have a mobile webpage created using jquery mobile which contains a header and 4 divs. The header is to occupy 10% of the page with the following 90% filled equally with the divs. I have the following code but I can't seem to get it to fill the page. I've done some research and I believe this may be to do with the content being less than the height of the page so I've tried setting the page height to the viewport height using jquery to no avail. Any ideas what I may be doing wrong?
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css"/>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<style>
#header
{
height:10%;
}
.content
{
height: 90%;
margin: 0px;
padding:0px;
}
#box1
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: red;
}
#box2
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: green;
}
#box3
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: blue;
}
#box4
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: orange;
}
</style>
<script type="text/javascript">
function SetHeightOfDiv(){
var viewportHeight = $(window).height();
var theDiv = document.getElementById('home');
theDiv.style.height = viewportHeight + "px";
}
</script>
</head>
<body onload="SetHeightOfDiv()">
<div data-role="page" id ="home">
<div data-role="header" id="header" data-tap-toggle="false"></div>
<div data-role="content" class ="content">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</div>
</div>
</body>
</html>
Read this: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/
DEMO
function SetHeightOfDiv() {
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
/* content div has padding of 1em = 16px (32px top+bottom). This step
can be skipped by subtracting 32px from content var directly. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
}
You also need to trigger this on window resize and orientationchange:
$(document).on("pageshow", "#home", function () {
SetHeightOfDiv();
});
$(window).on("resize orientationchange", function () {
SetHeightOfDiv();
});
Say I have a index.html with a canvas in it:
<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>
and the canvas is showing ok this way ~~~
Now I want to put a image as background behind the canvas and I tried to add a img tag in the body:
<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">
<img src="xxx.png" alt="" />
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>
but then the canvas appeared to show after the image not on top of it ...
I really know nothing about html I think it should not be that hard to get this done, hope someone can give a hand here, thanks :)
Live Demo
You just need to use z-index. I put the image and the canvas element in a container, and position them so the canvas will always be over the image.
Also another note, you shouldn't size your canvas using CSS, you should always do it via the properties directly. In my fiddle I did it via JS.
Markup
<div id="container">
<img class='img' src="http://lorempixel.com/320/480/" alt="" />
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
CSS
body{text-align: center;background: #f2f6f8;}
.img{position:absolute;z-index:1;}
#container{
display:inline-block;
width:320px;
height:480px;
margin: 0 auto;
background: black;
position:relative;
border:5px solid black;
border-radius: 10px;
box-shadow: 0 5px 50px #333}
#gameCanvas{
position:relative;
z-index:20;
}
you can draw image in canvas like this , rather than putting canvas on image
var topMap = new Image();
topMap.src = "myiamge.jpeg";
function drawMap() {
context.clearRect(0, 0, WIDTH, HEIGHT);
context.drawImage(topMap, 0, 0);
}
function init() {
drawMap();
}
topMap.onload = function() {
init();
}
You can set a background image for the canvas with background-image: url('xxx.png'); but the background won't be displayed if the user presses View image in the browser.
<canvas style="background-image: url('xxx.png');"id="gameCanvas" width="320" height="480"></canvas>
Or use JavaScript like Pranay Rana said (it's better if you have other levels or if you have to change the background later) :)
How can I center the text beside the textarea?
http://jsfiddle.net/47NyA/
Thank you!
Pure css
http://jsfiddle.net/47NyA/7/
This could work for you:
<html>
<head>
<title>
</title>
<style type="text/css">
/* style here */
div#main{
position:relative;
vertical-align:middle;
}
textarea{
}
div.right{
position:absolute;
top:45%;
right:0px;
width: 100px;
}
</style>
</head>
<body>
<div id="main">
<textarea></textarea>
<div class="right">
TEXT
</div>
</div>
</body>
</html>
JavaScript solution:
This could work for you:
http://jsfiddle.net/47NyA/4/
Let me know if it does the trick.
<script type="text/javascript">
jQuery(document).ready(function(){
// set init (default) state
var t = jQuery('#text_area');
t.data('x', t.outerWidth());
t.data('y', t.outerHeight());
t.mouseup(function(){
var th = jQuery(this);
if (th.outerWidth()!= th.data('x') || th.outerHeight() != th.data('y'))
// set new height/width
th.data('x', th.outerWidth());
th.data('y', th.outerHeight());
$("#center_text").css("margin-top", (th.outerHeight()/2 - 20) + "px");
});
});
</script>
Try with This
<div style="display:table">
<label for="textarea">Description</label><br>
<textarea id="textarea" style="display: table-cell;"></textarea>
<div style="vertical-align: middle; display: table-cell; width:100px; text-align:center; border:#f00 1px solid;">Text</div>
</div>
also check in Fiddle
You can use Javascript to get height of textarea, and update the line-height of the on the right, set text align to be center