http://jsfiddle.net/3j24hrgf/1/
<div class="note">
<textarea rows="4" placeholder="Your note's text here"></textarea>
</div>
.note {
background-color: green;
width: 500px;
height: 500px;
}
textarea {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
resize: none;
background-color: transparent;
border: dashed 2px;
padding: 5px;
font-family: 'Rancho', Helvetica, sans-serif;
font-size: 30px;
}
我在 div 中制作了一个水平居中的文本区域,但我似乎无法操纵垂直位置。添加 margin-top 会将整个 div 而不是 textarea 本身向下推。
最佳答案
是因为margin collapsing您可以将 display: inline-block;
添加到 .note
来修复它。
.note {
background-color: green;
width: 500px;
height: 500px;
display: inline-block;
}
textarea {
margin-top: 50px;
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
resize: none;
background-color: transparent;
border: dashed 2px;
padding: 5px;
font-family:'Rancho', Helvetica, sans-serif;
font-size: 30px;
}
<div class="note">
<textarea rows="4" placeholder="Your note's text here"></textarea>
</div>
关于html - 将上边距添加到 div 中的文本区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26485142/