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

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

在父母上添加：

display: table;

然后在您想要居中的文字上添加：

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

OR

在父母上添加：

position: relative;

然后在您想要居中的文字上添加：

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

Answer 2

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

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

之后你可以实现Hive7告诉或阅读的所有内容：

html div和类的对齐方式

2 个答案: