如何在html中对齐内容？

Question

我正在努力获得平板电脑屏幕的响应式设计。但是在使用float: left时，它并没有移动内容。相反，白色空间增加了。

我尝试了边距，但它对内容没有反应。在扩展地址字段时，它正在增加，用户ID字段与我使用float: left.

时保持一致

需要帮助..

尝试使用firefox - 快捷方式：ctrl+_shift+m

我需要下面的输出，它应该响应屏幕。

我需要来自

的空格

margin left -->userid
margin left -->123456

margin right-->Address
margin right-->123, Wellington Road, bla bla....

这是我的代码..

.outer{
margin: 0 10%; 
padding: 50px 0px; 
border: 2px solid #666666; 
text-align: center;
}
.row{
  text-align: center;
 
  }
.block1{
  display: inline-block;
   float: left;
  }

.block2{
  display: inline-block;
   float: right;
  }
  .block3{
  display: inline-block;
   float: left;
  }

.block4{
  display: inline-block;
   float: right;
  }

<div class="outer">
<div class="row">
  <div class="block1">
    Userid
  </div>
  <div class="block2">
    Address
   </div>
</div>
<div style="min-height: 30px;"></div>
<div class="row">
  <div class="block3">
    123456
  </div>
  <div class="block4">
    123, Wellington Road, Australia Zip 23643-9383
   </div>
</div>
  </div>

Answer 1

您可以移除浮动，文本对齐并为元素添加边距。

.outer{
margin: 0 10%; 
padding: 50px 0; 
border: 2px solid #666666; 
/* text-align: center; */
}
.block1, .block2, .block3, .block4 {
  display: inline-block;
  width: 40%;
  vertical-align: top;
}
.block1, .block3 {
  margin-left: 10%;
}
.block2, .block4 {
  margin-right: 10%;
}

<div class="outer">
<div class="row">
  <div class="block1">
    Userid
  </div><!--
  --><div class="block2">
    Address
   </div>
</div>
<div style="min-height: 30px;"></div>
<div class="row">
  <div class="block3">
    123456
  </div><!--
  --><div class="block4">
    123, Wellington Road, Australia Zip 23643-9383
   </div>
</div>
  </div>