Align button and image vertically-CodePudding

I wanted to align button and Image vertically in center, right now button is showing on top of line, I am using bootstrap, can anyone help?

<div >
<div  style="margin-left: -37px;"><p  style="display:none">Save</p><button style="display:none" fieldid="81" >Save Image</button>
<div >  <span ><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" > 
 </div></div>
 <div >
<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: Current Output Image

CodePudding user response：

Try Changing the first div elements class to <div > instead of <div >

CodePudding user response：

You can use display: flex with align-items: center

Please check fiddle https://jsfiddle.net/zc5axdnr/1/

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
  
<head>
   
</head>
  
<body>
    <div >
        <div  style="display: flex; align-items: center;">
          <div >
          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 >
            <button >
            Button
            </button>
          </div>
        </div>
    </div>
</body>
  
</html>