html div和类的对齐

Question

我一直在玩div和课程，试图让我的网站上的文字排得很好。目前，我有两个类，我想要对齐相邻的两个列。我会添加代码，但是基本上，右边的列，文本列，在移动设备上不会对齐。我希望这个专栏有可能有多行文本，垂直中心到行中间，目前我正在使用填充，但这不是理想的结果。

另外，我必须在我的内容分区下面有一些文本，否则我的页脚会爬升，这也是烦人的…我已经尝试了很多不同的div和类设置，但是我还没有找到正确的设置

html和css在这里：http://hascomp.net/

问题的领域是：

<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

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

在父级添加：

display: table;

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

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

或

在父级添加：

position: relative;

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

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

Answer 2

首先，我建议您将图像和文本(content左翼和contentrightcol)包装成一个div，div.row (例如)。然后，添加一些清除，以防止高度问题。这也可以帮助您进一步开发小屏幕。

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

之后，您可以实现Hive7告诉的所有内容或阅读更多有关它的内容：

• http://css-tricks.com/centering-in-the-unknown/
• ?