blocks|key|1536336|text|我想到的一种基本方法是将项目放到一个表格中，并有两个单元格，一个单元格包含文本，另一个包含图像，并对标记使用style="valign:center“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1536337|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>One basic way that comes to mind would be to put the item into a table and have two cells, one with the text, the other with the image, and use 
    style="valign:center"
with the  tags.</p>


blocks|key|1321145|text|This+might+get+you+started.|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1321146|我总是求助于this+solution。不要太客套，这样就能把工作做好。|1321147|编辑:我应该指出，使用以下代码可能会达到您想要的效果(原谅内联样式；它们应该在单独的工作表中)。图像上的默认对齐方式(基线)似乎会导致文本与基线对齐；将其设置为中间会使效果更好，至少在FireFox+3中是这样。|1321148|​|1321149|<div>
++++<img+src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg"+style="vertical-align:+middle;"+width="100px"/>
++++<span+style="vertical-align:+middle;">Here+is+some+text.</span>
</div>|code-block|syntax|javascript|1321150|1321151|entityMap|0|LINK|mutability|MUTABLE|url|http://phrogz.net/CSS/vertical-align/index.html|1|http://www.jakpsatweb.cz/css/css-vertical-center-solution.html^0|0|R|0|0|6|D|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|19|8|@]|9|@]|C|$M|N]]|$1|O|3|I|5|6|7|1A|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]|X|$5|S|T|U|C|$V|Y]]]]

<p><a href="http://phrogz.net/CSS/vertical-align/index.html" rel="noreferrer">This might get you started.</a></p>

<p>I always fall back on <a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html" rel="noreferrer">this solution</a>. Not too hack-ish and gets the job done.</p>

<p>EDIT: I should point out that you might achieve the effect you want with the following code (forgive the inline styles; they should be in a separate sheet). It seems that the default alignment on an image (baseline) will cause the text to align to the baseline; setting that to middle gets things to render nicely, at least in FireFox 3.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" style="vertical-align: middle;" width="100px"/&gt;
    &lt;span style="vertical-align: middle;"&gt;Here is some text.&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1536440|text|这是一个有趣的问题。如果你事先知道文本容器的高度，你可以使用等于该高度的line-+height，它应该垂直居中文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1536441|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>That's a fun one.  If you know ahead of time the height of the container of the text, you can use line-height equal to that height, and it should center the text vertically.</p>


blocks|key|1321261|text|“纯HTML/CSS”是否排除了表的使用？因为他们很容易就能做到你想要的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1321262|<table>
++++<tr>
++++++++<td+valign="top"><img+src="myImage.jpg"+alt=""+/></td>
++++++++<td+valign="middle">This+is+my+text!</td>
++++</tr>
</table>|code-block|syntax|javascript|1321263|尽管你喜欢Flame，但这是可行的(而且在老式的、简陋的浏览器中也有效)。|1321264|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>Does "pure HTML/CSS" exclude the use of tables?  Because they will easily do what you want:</p>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;td valign="top"&gt;&lt;img src="myImage.jpg" alt="" /&gt;&lt;/td&gt;
        &lt;td valign="middle"&gt;This is my text!&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Flame me all you like, but that works (and works in old, janky browsers).</p>


blocks|key|1536557|text|由于这个问题的大多数答案都在2009到2014年之间(除了2018年的评论)，这个问题应该有一个更新。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1536558|我找到了Spongman在14年6月11日23:20提出的换行问题的解决方案。|1536559|如果您在jsfiddle.net/vPpD4示例的div标签下的CSS中添加以下内容，您将获得我认为Spongman所询问的所需的换行效果。我不知道这是什么时候适用的，但它适用于所有当前(截至2020年12月/2021年1月)适用于Windows计算机的浏览器。注意:我还没有在Apple+Safari浏览器上进行测试。我也没有在任何移动设备上测试过。|1536560|++++div+img+{+
++++++++float:+left;
++++}
++++.clearfix::after+{
++++++++content:+"";+
++++++++clear:+both;
++++++++display:+table;
++++}|code-block|syntax|javascript|1536561|我还在图像周围添加了一个边框，这样读者就可以理解图像的边缘在哪里，以及为什么文本会这样换行。生成的示例如下：http://jsfiddle.net/tqg7hLzk/|offset|length|1536562|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/tqg7hLzk/^0|0|0|0|0|1I|T|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>Since most of the answers to this question are between 2009 and 2014 (except for a comment in 2018), there should be an update to this.</p>
<p>I found a solution to the wrap-text problem brought up by Spongman on Jun 11 '14 at 23:20.  He has an example here: jsfiddle.net/vPpD4</p>
<p>If you add the following in the CSS under the div tag in the jsfiddle.net/vPpD4 example, you get the desired wrap-text effect that I think Spongman was asking about.  I don't know how far back this is applicable, but this works in all of the current (as of Dec 2020/Jan 2021) browsers available for Windows computers.  Note: I have not tested this on the Apple Safari browser.  I have also not tested this on any mobile devices.</p>
<pre><code>    div img { 
        float: left;
    }
    .clearfix::after {
        content: &quot;&quot;; 
        clear: both;
        display: table;
    }
</code></pre>
<p>I also added a border around the image, just so that the reader will understand where the edge of the image is and why the text wraps as it does.  The resulting example looks is here: <a href="http://jsfiddle.net/tqg7hLzk/" rel="nofollow noreferrer">http://jsfiddle.net/tqg7hLzk/</a></p>


<p>What is the best and easiest way to vertically center text that's next to an image in html? Needs to be browser version/type agnostic. A pure html/CSS solution.</p>


How do I vertical center text next to an image in html/css?

Windows

容器

什么是最好的和最简单的方法来垂直居中的文本旁边的图像在html？需要浏览器版本/类型不可知。一个纯html/CSS解决方案。

问如何在html/css中将文本放在图像旁边？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html/css中将文本放在图像旁边？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html/css中将文本放在图像旁边？
EN