blocks|key|2312660|text|这应该能让你接近：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2312661|<div>
++++<div+style="background:+grey;+width:+15%25;+float:left"></div>
++++<div+style="background:+blue;+width:+85%25;+float:left"></div>
</div>|code-block|syntax|javascript|2312662|用图像替换灰色背景div，用文本替换蓝色背景div。|2312663|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This should get you close:</p>

<pre><code>&lt;div&gt;
    &lt;div style="background: grey; width: 15%; float:left"&gt;&lt;/div&gt;
    &lt;div style="background: blue; width: 85%; float:left"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Replace the grey background div with your image and the blue with your text.</p>


blocks|key|3100406|text|看看这个|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3100407|HTML：|3100408|<section>
++++<div+id="one"></div>
++++<div+id="two"></div>
</section>|code-block|syntax|javascript|3100409|CSS：|3100410|section+{
++++width:+80%25;
++++height:+200px;
++++background:+aqua;
++++margin:+auto;
++++padding:+10px;
}
div#one+{
++++width:+15%25;
++++height:+200px;
++++background:+red;
++++float:+left;
}
div#two+{
++++margin-left:+15%25;
++++height:+200px;
++++background:+black;
}|3100411|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/watson/Gsj27/3/^0|0|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p><a href="http://jsfiddle.net/watson/Gsj27/3/" rel="nofollow">Check this out</a></p>

<p>HTML:</p>

<pre><code>&lt;section&gt;
    &lt;div id="one"&gt;&lt;/div&gt;
    &lt;div id="two"&gt;&lt;/div&gt;
&lt;/section&gt;
</code></pre>

<p>CSS:</p>

<pre><code>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;
}
</code></pre>


blocks|key|991133|text|你是这个意思吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|991134|html|991135|<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>|code-block|syntax|javascript|991136|css|991137|.container+{
++clear:+both;
}
.images+{
++width:+15%25;
++float:+left;
++vertical-align:+text-top;
}
.text+{
++width:+85%25;
++float:+right;
++vertical-align:text-top;
}|991138|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Is this what you mean?</p>

<p>html</p>

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

<p>css</p>

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


blocks|key|3100447|text|下面是对代码的修改：http://jsfiddle.net/hQ6Vw/1/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3100448|我所做的唯一改变就是为img和p标记分配匹配的上/下边距。我想这会给你带来你想要的效果。|style|CODE|3100449|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/hQ6Vw/1/^0|A|S|0|0|B|3|F|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@$A|U|B|V|F|G]|$A|W|B|X|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

<p>Here's a fiddle with your code in it: <a href="http://jsfiddle.net/hQ6Vw/1/" rel="nofollow">http://jsfiddle.net/hQ6Vw/1/</a></p>

<p>The only changes I made was to assign matching top/bottom margins to the <code>img</code> and <code>p</code> tags. I think that will give you the effect you're looking for. </p>


blocks|key|991159|text|为什么不直接将#text+p显示设置为display:+inline或display:block;，或者使用边距对齐它们呢？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|991160|entityMap^0|7|7|J|F|Z|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>Why not just set the <code>#text p</code> display to <code>display: inline</code> or <code>display:block;</code> or use margins to align them?</p>


blocks|key|991200|text|如果您使用浮动和垂直对齐，这两者将不会一起工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|991201|浮动从规则流中提取自身，在规则流中的任何内容之后，在下一行的一侧或另一侧滑动。|991202|垂直对齐工程：|991203|在中间内联框中(内联块级元素或使用display:inline-block;显示)|ordered-list-item|offset|length|style|CODE|991204|内部td或它的CSS默认显示：display:table-cell;
这里更新了jsfiddle+@TXChetG|991205|使用display:inline-block;+http://jsfiddle.net/GCyrillus/hQ6Vw/2/|991206|使用display:table/*+table-cell*/;+http://jsfiddle.net/GCyrillus/hQ6Vw/3/|991207|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/GCyrillus/hQ6Vw/2/|1|http://jsfiddle.net/GCyrillus/hQ6Vw/3/^0|0|0|0|H|L|0|F|J|0|2|L|O|12|0|0|2|T|W|12|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|15|8|@$I|16|J|17|K|L]]|9|@]|A|$]]|$1|M|3|N|5|H|7|18|8|@$I|19|J|1A|K|L]]|9|@]|A|$]]|$1|O|3|P|5|H|7|1B|8|@$I|1C|J|1D|K|L]]|9|@$I|1E|J|1F|1|1G]]|A|$]]|$1|Q|3|R|5|H|7|1H|8|@$I|1I|J|1J|K|L]]|9|@$I|1K|J|1L|1|1M]]|A|$]]|$1|S|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

<p>If you use float and verticl-align, those two won'nt work together.<br>
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.</p>

<p>Vertical-align works: </p>

<ol>
<li>in betweem inline-boxes (inline-block-level element or displayed so with <code>display:inline-block;</code>)</li>
<li><p>inside td or it's CSS default display : <code>display:table-cell;</code></p>

<p>here jsfiddle @TXChetG updated   </p></li>
<li>Using <code>display:inline-block;</code> <a href="http://jsfiddle.net/GCyrillus/hQ6Vw/2/" rel="nofollow">http://jsfiddle.net/GCyrillus/hQ6Vw/2/</a></li>
<li>Using <code>display:table/* table-cell*/;</code>
<a href="http://jsfiddle.net/GCyrillus/hQ6Vw/3/" rel="nofollow">http://jsfiddle.net/GCyrillus/hQ6Vw/3/</a></li>
</ol>


blocks|key|2312748|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2312749|将容器div显示为表，将文本和图像div显示为表格单元格，使它们具有相同的高度。然后，您可以通过垂直对齐:中间对齐图像垂直中心。|unstyled|2312750|#quotes+{
++++display:table;
}
#picture+{
++++width:+15%25;
++++display:table-cell;
++++vertical-align:+middle;
}
#text+{
++++display:table-cell;
++++width:85%25;
++++padding-left:+16%25;
}
#picture+img+{
++++width:+100%25;
}++++|2312751|http://jsfiddle.net/X3WsV/1/|offset|length|2312752|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|F|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

<pre><code>&lt;div id="quotes"&gt;
    &lt;div id="picture"&gt;
        &lt;img src="tom.jpg" /&gt;
    &lt;/div&gt;
    &lt;div id="text"&gt;
        &lt;p&gt;"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..."&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.</p>

<pre><code>#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%;
}    
</code></pre>

<p><a href="http://jsfiddle.net/X3WsV/1/" rel="nofollow">http://jsfiddle.net/X3WsV/1/</a></p>


<blockquote>
  <p>UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?</p>
</blockquote>

<p>I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.</p>

<p>The image should be 15% of the width of the container div, with the text using the remaining 85%</p>

<p>The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other. </p>

<p>I've tried to work this out but can't seem to do it! Can anyone help?</p>

<pre><code>#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;
}
</code></pre>

<p>and</p>

<pre><code> &lt;div id="quotes"&gt;
    &lt;div id="picture"&gt;
        &lt;img style="width: 100%; vertical-align: middle" src="tom.jpg" &gt;
    &lt;/div&gt;
    &lt;div id="text"&gt;
        &lt;p&gt;"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..."&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;              
</code></pre>


Vertically aligned image and text div

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

更新:答案已经让我接近了，但它们仍然没有垂直对齐，因为文本div更大，我如何使它们都保持相同的高度，从而对齐？我希望有两个DIV在彼此旁边，一个包含图像，一个包含文本，两者都位于一个容器DIV中。图像应该是容器div宽度的15%，文本使用其余的85%。图像和文本应该在各自的DIVs内垂直对齐，因此看起来它们是对齐的。我...

问垂直对齐图像和文本div
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问垂直对齐图像和文本divEN