对齐表格 - 输入字段/按钮的背景图像

Question

我试图做一个设计HTML/CSS的形式，这样的形象在中间： https://postimg.org/image/u2rrzgz09/

形式应该是在后台中心（文本（文本1和文本2）应该在字段开始的位置（左边）开始，并且按钮应该显示在表单的中心。

我确实到现在为止： 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; 
}