HTML div 和类的对齐方式

Question

我一直在玩div和类，试图让我网站上的文本对齐。目前我有 2 个类，我想将它们并排对齐以形成 2 列。我添加了代码，但基本上，右侧列，文本列，在移动设备上不能很好地对齐。我希望此列可能有多行文本，垂直居中到行中间，目前我使用填充，但这并不理想。

另外，我必须在我的内容 Div 下方有一些文本，否则我的页脚会爬起来，这也很烦人......我一直在尝试一堆不同的div 和类设置，但我还没有找到正确的设置

HTML和CSS在这里： http://hascomp.net/

问题领域是：

.HTML

<div id="content"> 
  <p class="contentleftcol" >
  <img src="frontend/laptop-computer_repairs.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  Windows OS computer repairs and tune ups: remove not needed software slowing the computer down
  </p>
  <p class="contentleftcol" >
  <img src="frontend/wifi.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  wifi configuration and optimisation
  </p>
  <p class="contentleftcol" >
  <img src="frontend/anti_spyware.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  virus and spyware removal
  </p>
  <p class="contentleftcol" >
  <img src="frontend/computer_upgrades.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  computer upgrades
  </p>
  </div>

.CSS

#content{
    padding:0 0 24px 24px;
}
.contentleftcol{
    float:left;
    width:150px;
    padding-left:50px;
    height:150px;

}
.contentrightcol{
    float:right;
    width:760px;
    padding-top:68px;
    padding-bottom:70px;
}

谢谢！

Answer 1

首先，

我建议您将图像和文本（contentleftcol 和 contentrightcol）包装成一个div，div.row（例如）。然后，向其添加一些清除修复程序以防止高度问题。这也可以帮助您进一步开发小屏幕。

    .row:after{
      content: "";
      display: table;
      clear: both; 
    }

之后，您可以实现Hive7所说的所有内容或阅读更多相关信息：

• http://css-tricks.com/centering-in-the-unknown/
• 如何将一个
  水平居中另一个

  ？

Answer 2

垂直对齐文本的方法可以通过多种方式完成，但最有效的方法是：

在父项上添加：

display: table;

然后在要居中的文本上添加：

display: table-cell;
vertical-align: middle;

或

在父项上添加：

position: relative;

然后在要居中的文本上添加：

position: absolute;
top: 50%;
margin-top: -(width/2)