Question

嘿伙计们我正在尝试创建类似于下图的内容。如你所见，我有两个容器，它们的大小各不相同。（{DEPARTMENT OF BUSINESS} {-------}）左侧容器将包含文本，右侧容器将包含线条图像。我基本上希望2占据100％的空间。我认为我的代码应该解释我正在尝试做什么。

我甚至不知道我是否以正确的方式进行此操作，因为即使我使用该线作为背景图像，我如何将其向下推以使其垂直居中？我没有利润和填充的地方。 enter image description here

这是我的代码：

                    <div id="DepartmentHeader" class="clearfix" style="width: 626px">
                      <div id="DepartmentHeaderText" style="float:left">DEPARTMENT OF BUSINESS</div>
                      <div id="DepartmentHeaderDivider" style="float: left; width: 50%; background: url('images/DepartmentHeaderDividerLine.png') repeat-x;">&nbsp;</div>                   
                    </div>

Answer 1

如果我理解你正在尝试做什么，你可能会使图像与DepartmentHeader div的高度与中心的线相同，将其设置为DepartmentHeader上的背景图像（这将消除对DepartmentHeaderDivider div），使用页面其余部分的背景颜色设置DepartmentHeaderText div的样式。只要你使DepartmentHeader div的宽度为100％并且你保持DepartmentHeaderText div的文本左对齐你应该是好的。

Answer 2

如果右侧部分只应填充背景图片，则只需要一个<div>。

<div id="DepartmentHeader" class="clearfix" style="width: 626px; background: url('images/DepartmentHeaderDividerLine.png') repeat-x left center">
   <h1 class="headerText">DEPARTMENT OF BUSINESS</h1>
</div>

这应该使您的背景图像在中心垂直对齐。现在应该接收页面的背景颜色，以覆盖背景图像。也许你添加一些填充进行微调。

h1.headerText {
   background: #ffcc33; // use your background-color
   padding: 0 5px;
   margin: 5px; //apply what you need
}

Answer 3

您是否尝试将style="vertical-align:middle;"应用于图片？

Answer 4

假设你想要这个：

- - - - - - - - - - - - - - - - - - - -
|Text             | |                 |
|                 | |                 |
|                 | |-----------------|
|                 | |                 |
|                 | |                 |
- - - - - - - - - - - - - - - - - - - -

您的HTML / CSS将是：

<div style="overflow: auto;"><!-- overflow to contain floats -->
    <div style="float: left; width: 50%;">text</div>
    <div style="float: left; width: 50%; 
                background: url('line.gif') repeat-x left center"></div>
</div>

现在，挑战是让两个div的高度相同。一些选择：

1 - 如果右边div的唯一目的是在白色空间的垂直中心处直观地放置一条线，请不要添加第二个div。而是将那个背景放在容器div中，然后给你的文本内部div一个背景颜色来掩盖那一半的那条线。

2 - 使用javascript使两个div具有相同的高度。抓住每个的高度，看哪个更高，然后将较短的一个设置为相同的高度。

3 - 使用'display：table'而不是CSS：http://www.quirksmode.org/css/display.html#table（通常需要注意的是IE 7及以下版本不支持它）

Answer 5

这可以通过一点CSS Trickery（无图像）来完成

Live Fiddle：

http://jsfiddle.net/Jaybles/zPvv5/

<强> HTML

<div class="container">
    <div class="line"></div>
    <div class="cap">Business Items</div>
</div>


<div class="container">
    <div class="line"></div>
    <div class="cap">Business Items 2</div>
</div>

<强> CSS

.container{
    width:100%;
    height:46px;
    font-size:30pt;
    font-family:verdana;
    margin-bottom:20px;
}
.container .line{
   width:100%;
   border-bottom:3px solid #000;
   height:23px;
   position:absolute;
}
.container .cap{
    position:absolute;
    padding-right:10px;
    background:#fff;
}

Answer 6

让线条一直拉伸，然后用文字覆盖它。您可以在#DepartmentHeaderText上使用填充调整空间。下面的代码（当然用真实颜色替换颜色）：

的CSS：

#DepartmentHeader {
  position: relative;
  border-top: 1px solid border_color;
  background: background_color;
  width: 626px;
}
#DepartmentHeaderText {
  position: relative;
  top: -1px;
  float: left;
  background: background_color;
}

HTML：

<div id="DepartmentHeader" class="clearfix" style="width: 626px">
  <div id="DepartmentHeaderText" style="float:left">DEPARTMENT OF BUSINESS</div>
</div>

CSS 2 div的大小与图像不同1

6 个答案: