TEXTAREA中底端居中一个button
实现这样一个效果:
HTML结构:
<div class="am-modal-bd">
<div class="am-form-group">
<textarea id="reply-con" maxlength="1500"></textarea>
<div>
<button id="save-reply" class="am-btn am-btn-default am-btn-sm">保存</button>
</div>
</div>
</div>
实现步骤:
1.按钮居中使用纯CSS编写的话,需要知道按钮的宽度,但是按钮中的文字会动态改变按钮宽度。实现起来不太好做。
解决方法:使用flex布局,在按钮外套一层div,div中使用flex布局:
<div>
<button id="save-reply" class="am-btn am-btn-default am-btn-sm">保存</button>
</div>
div样式:
div {
width: 100%;
display: flex;
justify-content: center;
position: absolute;
top: 100%;
}
top: 100% 是为了让按钮位于TEXTAREA底部。
2.去除TEXTAREA边框样式,选中样式,阴影效果:
#rep-con {
border: none;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
div中居中一个button
需要实现的效果:
HTML结构:
<div style="width:100%; height:100%">
<button type="button">hello</button>
</div>
同样的可以采用flex布局:
// 水平垂直居中
#wrapper {
display: flex;
align-items: center;
justify-content: center;
}
// 仅水平居中
#wrapper {
display: flex;
justify-content: center;
}
如果按钮是固定宽度,可以不使用flex布局:
// 水平垂直居中
button{
height:20px;
width:100px;
margin: -20px -50px;
position:relative;
top:50%;
left:50%;
}
// 仅水平居中
button{
margin: 0 auto;
}
// 或者 仅水平居中
div{
text-align:center;
}