0

更新：答案让我很接近，但由于文本 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>
4

7 回答 7

1

这是你的代码的小提琴：http: //jsfiddle.net/hQ6Vw/1/

我所做的唯一更改是将匹配的顶部/底部边距分配给imgandp标签。我认为这会给你你正在寻找的效果。

于 2013-06-12T21:42:08.897 回答
1

如果您使用 float 和 vertcl-align，这两者将无法一起工作。
浮动从常规流中提取自身，并在常规流中的任何内容之后的一侧或另一侧滑到下一行的顶部。

垂直对齐的作品：

  1. 在 inline-boxes 之间（inline-block-level 元素或用 显示display:inline-block;）

  2. 在 td 或它的 CSS 默认显示中：display:table-cell;

    这里 jsfiddle @TXChetG 更新了

  3. 使用display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
  4. 使用display:table/* table-cell*/; http://jsfiddle.net/GCyrillus/hQ6Vw/3/
于 2013-06-12T22:05:28.687 回答
0

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

于 2013-06-12T21:44:27.310 回答
0

看一下这个

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;
}
于 2013-06-12T21:33:21.103 回答
0

你是这个意思吗？

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;
}
于 2013-06-12T21:35:43.260 回答
0 
<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 显示为表格，将文本和图像 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/

于 2013-08-06T11:02:47.833 回答
0

这应该让你接近：

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

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

于 2013-06-12T21:31:35.577 回答