Question

这里有一个CSS新手。我在Dreamweaver CS6中使用流体网格布局。我创建了一个headercontainer div，然后在其中创建了headerleft和headerright div。我在headerleft中添加了一个图像，并在headerright中输入了一些文本。无论从流体布局调整大小，我希望能够使文本与图像的中心保持一致。

最好的方法是什么？我将两个标题放在一个容器div中，希望它能让我轻松地将容器中的两个div对齐，但我只是不确定如何实现它。这是我目前在页面这一部分的代码：

编辑：代码现在说（但仍然不起作用）：

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 90.5666%;
    padding-left: 0.2166%;
    padding-right: 0.2166%;
}
#headercontainer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    text-align: left;
}
#headerleft {
    clear: both;
    float: left;
    margin-left: 0;
    width: 49.7607%;
}
#headerright {
    clear: none;
    margin-left: 0.4784%;
    width: 49.7607%;        
}

html说：

<div class="gridContainer clearfix">
  <div id="headercontainer">
    <div id="headerright">
      <h2>Support For All Your Gadgets &amp; Tech!</h2>
    </div>
    <div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2>
    </div>
  </div>

非常感谢！

Answer 1

从display:block;和#headerleft

中删除#headerright

此外，您只能在标题页ID上设置float:left;，并在您的html代码中将div headerright放在左侧之前。

Answer 2

试试这段代码：

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
}
#headercontainer {
    float: left;
    margin-left: 0;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    text-align: left;
    position:relative;
}
#headerleft {
    float: left;
    margin-left: 0;
    width: 50%;
}
#headerright {
    clear: none;
    margin-left: 50%;     
}


<div class="gridContainer clearfix">
  <div id="headercontainer">

    <div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2>
    </div>
    <div id="headerright">
      <h2>Support For All Your Gadgets &amp; Tech!</h2>
    </div>
  </div>
</div>

对齐两个div？

2 个答案: