Aligned Form - Eingabefelder/Tasten in der Mitte eines Hintergrundbildes

Question

Ich versuche, ein Design HTML/CSS für eine Form wie in diesem Bild zu machen: https://postimg.org/image/u2rrzgz09/

Formular im Zentrum von Hintergrund sein sollte ((Bild), Text (Text1 und Text2) sollte dort beginnen, wo die Felder beginnen (links) und Button sollte in der Mitte des Formulars angezeigt werden.

Ich habe bis jetzt: https://jsfiddle.net/jk17sj87/

HTML:

<div class="parent"> 
    <div class="col1"> 
    <div class="text"> 
     Text1 
    </div> 
    <div class="sec11"> 
     (image) 
    <input type="text"/> 
    </div> 

    <div class="sec2"> 
     (image) 
    <input type="text"/> 
    </div> 
    </div> 

    <div class="col2"> 
    <div class="text"> 
     Text2 
    </div> 
    <div class="sec3"> 
     (image) 
     <input type="text"/> 
    </div> 
    <div class="sec4"> 
     (image) 
     <input type="text"/> 
    </div> 
</div> 

</div> 
<div class="button"> 
    <button>Button</button> 
</div> 

CSS:

.parent{ width: 100%; display: flex;} 
.col1{margin-right: 10px;} 
.text{margin-left: 52px;} 
.button {margin-left: 200px;} 

Answer 1

/*Programs*/ 
 
.parent{ 
 
width: 100%; 
 
display: flex; 
 
height: 100%; 
 
min-height: 200px; 
 
} 
 

 
.col1, .col2 { 
 
    display: inline-block; 
 
} 
 

 
.text{ 
 
    margin-left: 52px; 
 
} 
 

 
.button { 
 
    text-align: center; 
 
} 
 
.parent-content { 
 
    margin: auto; 
 
}

<div class="parent"> 
 
<div class="parent-content"> 
 
<div class="col1"> 
 
<div class="text"> 
 
Text1 
 
</div> 
 
    
 
<div class="sec11"> 
 
    (image) 
 
    <input type="text"/> 
 
</div> 
 
<div class="sec2"> 
 
    (image) 
 
    <input type="text"/> 
 
</div> 
 
</div> 
 
    
 
<div class="col2"> 
 
<div class="text"> 
 
Text2 
 
</div> 
 
<div class="sec3"> 
 
    (image) 
 
    <input type="text"/> 
 
</div> 
 
<div class="sec4"> 
 
    (image) 
 
    <input type="text"/> 
 
</div> 
 
</div> 
 
<div class="button"> 
 
<button>Button</button> 
 
</div></div></div>

Answer 2

.parent { 
width: 100%; 
display: flex; 
max-width: 465px; 
margin: 0 auto; 
} 

.button { 
    text-align: center; 
}