Question

更新：答案让我接近，但是当文字div较大时，它们仍然没有垂直对齐，我怎样才能使它们具有相同的高度并因此对齐？

我希望彼此相邻的两个DIV，一个包含图像，一个包含文本，两个都位于容器DIV中。

图像应为容器div宽度的15％，文本使用剩余的85％

图像和文本应在各自的DIV中垂直对齐，因此看起来它们彼此对齐。

我试图解决这个问题，但似乎无法做到这一点！有人可以帮忙吗？

    #picture {
        float: left;
        width: 15%;
        line-height: auto;
    }

    #text {
        width: auto;
        padding-left: 16%;
        line-height: auto;
        vertical-align: middle;
        margin-top: auto;
        margin-bottom: auto;
    }

    #text p {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

和

           <div id="quotes">
                <div id="picture">
                    <img style="width: 100%; vertical-align: middle" src="tom.jpg" >
                </div>
                <div id="text">
                    <p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
                </div>
            </div>

Answer 1

以下是您的代码中的小提琴：http://jsfiddle.net/hQ6Vw/1/

我所做的唯一更改是将匹配的上/下边距分配给img和p标记。我想这会给你你正在寻找的效果。

Answer 2

如果你使用float和verticl-align，那两个人就不能一起工作漂浮物从常规流中提取出来，并在常规流中的任何内容之后立即在下一行的顶部滑动。

垂直对齐工作：

in betweem inline-boxes（内联块级元素或使用display:inline-block;显示）
在td内或它的CSS默认显示：display:table-cell;

这里jsfiddle @TXChetG已更新
使用display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
使用display:table/* table-cell*/; http://jsfiddle.net/GCyrillus/hQ6Vw/3/

Answer 3

这应该让你接近：

<div>
    <div style="background: grey; width: 15%; float:left"></div>
    <div style="background: blue; width: 85%; float:left"></div>
</div>

用图像替换灰色背景div，用文本替换蓝色。

Answer 4

Check this out

HTML：

<section>
    <div id="one"></div>
    <div id="two"></div>
</section>

CSS：

section {
    width: 80%;
    height: 200px;
    background: aqua;
    margin: auto;
    padding: 10px;
}
div#one {
    width: 15%;
    height: 200px;
    background: red;
    float: left;
}
div#two {
    margin-left: 15%;
    height: 200px;
    background: black;
}

Answer 5

这是你的意思吗？

HTML

<div class="container">
  <div class="images">
    <img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
  </div>
  <div class="text">
    Example
  </div>
</div>   
<div class="container">
  <div class="images">
    <img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
  </div>
  <div class="text">
    Example
  </div>
</div>

CSS

.container {
  clear: both;
}
.images {
  width: 15%;
  float: left;
  vertical-align: text-top;
}
.text {
  width: 85%;
  float: right;
  vertical-align:text-top;
}

Answer 6

为什么不将#text p显示设置为display: inline或display:block;或使用边距来对齐它们？

Answer 7

<div id="quotes">
    <div id="picture">
        <img src="tom.jpg" />
    </div>
    <div id="text">
        <p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
    </div>
</div>

将容器div显示为表格，将文本和图像显示为表格单元格以使它们具有相同的高度。然后，您可以将图像垂直居中，通过vertical-align：middle。

#quotes {
    display:table;
}
#picture {
    width: 15%;
    display:table-cell;
    vertical-align: middle;
}
#text {
    display:table-cell;
    width:85%;
    padding-left: 16%;
}
#picture img {
    width: 100%;
}

http://jsfiddle.net/X3WsV/1/

垂直对齐的图像和文本div

7 个答案: