#html #css #textarea #center #vertical-alignment
#HTML #css #текстовая область #разбивка по центру #выравнивание по вертикали
Вопрос:
Комментарии:
1. Можете ли вы дать представление о том, чего вы хотите достичь? Спасибо 🙂
2. @shub — работает для вас????
3. Нет, извините, это не работает для меня. Он центрирует текст по горизонтали, а не по вертикали.
4. @Umer Hayat Я загрузил изображение.
5. кстати, что не так с решением Артура Вульфа Уайта jsfiddle.net/47NyA/7 ?
Ответ №1:
Чистый css
Это может сработать для вас:
<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:
Это может сработать для вас:
Дайте мне знать, если это поможет.
<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>
Комментарии:
1. Спасибо за вашу помощь. Я хотел бы иметь решение с помощью CSS. Есть идеи?
2. Привет 🙂 Первое решение на самом деле является чистым CSS.
Ответ №2:
Попробуйте с этим
<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>
также проверьте скрипку
Ответ №3:
Вы можете использовать Javascript, чтобы получить высоту текстовой области и обновить высоту строки справа, установить выравнивание текста по центру