Question

我需要构建如下所示的布局

+-------+-----------------------------+-------+
|       |                             |       |
|       |                             |       |
|   A   |             B               |   C   |
|       |                             |       |
|       |                             |       |
|       |                             |       |
+-------+-----------------------------+-------+

在A区，我想放置一个与右上方对齐的图像。在B区，我想放置一个应居中的图像（垂直和水平）在区域C中，我想放置一个左下方对齐的图像

我有以下标记。

<div style="float: left;">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" style="float: left;">
    [...]
</div>
<div style="float: right;">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

我曾尝试使用CSS vertical-align，但它无法正常工作。我怎样才能获得我想要的东西？谢谢你的帮助

Answer 1

    <div style="float: left;">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" style="padding:25% 50%; ">
    [...]
</div>
<div style="float: right; margin-top: -51.5%;">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

而且，请不要问为什么51.5％ - 它工作得很好（在Chrome中检查），为什么 - 我不知道自己）

Answer 2

在中间列中水平和垂直对齐图像的最佳方法是使用背景图像。

background:url(yourimage.gif) no-repeat center center;

我会使用绝对定位将图像放在左右列上。

.leftcolumn { height:400px; width:100px; float:left; position:relative; border:1px solid blue; overflow:auto; }
.leftcolumn img { position:absolute; top:0px; right:0px; }
.rightcolumn { height:400px; width:100px; float:right; position:relative; border:1px solid red; overflow:auto; }
.rightcolumn img { position:absolute; bottom:0px; left:0px; }

HTML标记：

<div class="leftcolumn">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" ></div>
<div class="rightcolumn">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

Here is the .js fiddle

Answer 3

布局是否流畅？不同的高度？宽度不像高度那样难以使用

A区：什么都不做，图像会在页面的正常流程中去那里

B区：
选项1）如果框是固定的尺寸：使用保证金：100px auto 0;其中100px是与顶部的差异选项2）如果盒子是流体：使用位置绝对+负边距技术。对于此示例，图像将是200px高和300px宽，因此边距顶部和边距左边是-0.5 *那些尺寸

.slideshow { position:relative; }
.slideshow img { position:absolute; top:50%; left:50%; margin:-100px 0 0 -150px; }

C区：

div.zoneC { position:relative; }
div.zoneC img { position:absolute; right:0; bottom:0; }

Answer 4

使用table-row和table-cell的解决方案，您可以使用vertical-align。

Display proprety MDN

<强> HTML

<div class="area">
    <div style="width:250px;display:table-cell;text-align:right;">
        <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
    </div>
    <div class="slideshow" style="display:table-cell;width:500px;vertical-align:middle;text-align:center;">[...]
    </div>
    <div style="display:table-cell;width:250px;vertical-align:bottom;text-align:left;">
        <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
    </div>
</div>

<强> CSS

.area{
    height:600px; /* some fixed height */
    display:table-row;
 }

div{
    border: 1px solid red;
}

JSFiddle

表格单元格宽度也固定。

Answer 5

您可以使用表格布局：

HTML：

<div class="wrapper">
    <div class="a">A section</div>
    <div class="b">B section</div>
    <div class="c">C section</div>
</div>

CSS：

.wrapper {
    display: table;
    width: 100%;
}

.a,
.b,
.c {
    display: table-cell;
}

.a,
.c {
    width: [what you want];
}

将图像与基线对齐

5 个答案: