-1

这里有点 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>

非常感谢！

4

2 回答 2

1

从display:block;您的#headerleft和#headerright

此外，您只能float:left;在 headerleft id 上设置，并将 div 放在headerrighthtml 代码中的左侧之前。

于 2013-05-14T16:15:06.827 回答
0

试试这个代码：

.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>
于 2013-05-15T05:26:16.790 回答