0

我一直在玩 div 和 classes，试图让我的网站上的文本排列得很好。目前我有 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;
}

谢谢！

4

2 回答 2

0

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

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

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

于 2013-10-25T09:10:14.680 回答
0

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

在父级上添加：

display: table;

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

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

或者

在父级上添加：

position: relative;

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

position: absolute;
top: 50%;
margin-top: -(width/2)
于 2013-10-25T08:58:49.453 回答