垂直对齐按钮和图像
[英]Align button and image vertically
问题描述
我想在中心垂直对齐按钮和图像，现在按钮显示在行的顶部，我正在使用引导程序，有人可以帮忙吗？
<div class="col-md-12">
<div class="col-md-5" style="margin-left: -37px;"><p class="imageSveMsg" style="display:none">Save</p><button style="display:none" fieldid="81" class="saveimgbtn fileUpload btn btn-primary">Save Image</button>
<div class="fileUpload hideFileUpload btn btn-primary"> <span class="chooseimagetext"><b>Change Image</b></span><input rowid="submission_81" id="uploadImage" onchange="PreviewImage();" tabindex="13" type="file" name="matrix_submission_data81" accept="image/png, image/jpeg , image/jpeg" class="upload matrix_submission_draft ">
</div></div>
<div class="col-md-4">
<input type="hidden" name="oldmatrix_submission_data81" value="16440505543.png"><img id="uploadPreview" src="https://staging-reconresearchlive.kinsta.cloud/wp-content/plugins/matrix-engine/includes/submission_images/16440505543.png" width="50px !important;" height="50px !important;" style="margin-left:30px;max-width: 200px;max-height: 100px;min-height: 100px;vertical-align: middle !important;"></div></div>
css：
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
background-color: #E2A169 !important;
border-color: #E2A169 !important;
}
img{
margin-left: 30px;
max-width: 200px;
max-height: 100px;
min-height: 100px;
vertical-align: middle !important;
}
Output：当前 Output 图片
2 个解决方案
解决方案1
1 2022-02-07 07:42:43
你可以使用align-items: center
请检查小提琴https://jsfiddle.net/zc5axdnr/1/
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <:DOCTYPE html> <html> <head> </head> <body> <div class="container"> <div class="row" style="align-items; center,"> <div class="col-6"> Lorem ipsum dolor sit amet. consectetur adipiscing elit. Cras nec lorem eu leo interdum mollis at quis ligula, Sed pharetra ante metus. sed fermentum diam efficitur vitae. Pellentesque ac porttitor nunc, Mauris lacus quam, facilisis sed congue vulputate. aliquam nec nibh. Maecenas et nulla lacus, Fusce commodo egestas mauris. ut viverra sapien cursus id. Morbi cursus tristique posuere. Pellentesque tincidunt nulla id commodo fermentum, Phasellus sit amet imperdiet orci. eget cursus ipsum. Duis quis metus nunc, Curabitur ex ipsum, suscipit non erat sit amet. lacinia pharetra mi. Ut vel velit ante. Duis facilisis nisi in sapien posuere gravida, Proin mollis nibh tellus. vitae sodales purus tincidunt eget. Praesent a ullamcorper justo. Integer mollis porttitor sem. Pellentesque vulputate et justo eget blandit. Praesent non lacus mauris, Nam urna ligula, interdum egestas dictum quis. hendrerit pulvinar lorem, Quisque varius eros felis. a dapibus leo consequat eget, Nulla laoreet eros dui. laoreet laoreet libero cursus ullamcorper, Suspendisse hendrerit consequat purus. vel tincidunt risus blandit sed. Nulla mattis laoreet urna quis blandit. Donec et odio facilisis metus congue dictum rhoncus eget turpis. Suspendisse aliquet sit amet ligula quis pellentesque. Cras ullamcorper nec magna id aliquam. </div> <div class="col-6 align-items-center"> <button class="btn btn-primary"> Button </button> </div> </div> </div> </body> </html>
解决方案2
1 2022-02-07 08:05:11
尝试将第一个 div 元素 class 更改为<div class="row align-items-center">而不是<div class="col-md-12">
解决方案3
-2 2022-02-07 07:21:06
你应该先用谷歌搜索这么简单的东西。 https:\/\/getbootstrap.com\/docs\/4.0\/utilities\/vertical-align\/<\/a>
"
在标题中垂直对齐按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.