Question

我正在尝试为此图片中的表单设计html / css： https://postimg.org/image/u2rrzgz09/

表单应位于背景的中心（-image），文本（Text1和Text2）应从字段开始（左）开始，按钮应显示在表单的中心。

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>

对齐形式 - 在背景图像中间输入字段/按钮

2 个答案: