blocks|key|3537132|text|使用Flex|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3537133|​|3537134|.list{display:flex;}
.img-block{width:80px;+margin-right:20px}
.img-block+img{max-width:100%25}
p{margin:0;}|code-block|syntax|javascript|3537135|<div+class="list">
<div+class="img-block">
++<img+src="https://image.flaticon.com/icons/png/512/26/26012.png"+/>
</div>
<p>System+will+go+under+maintenance+from+15+Jan+2019+06.00+to+20+Jan+2019+10.00.+Sorry+for+any+inconveniences+caused.</p>
<div>|3537136|3537137|entityMap^0|2|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>Use <code>Flex</code></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-css lang-css prettyprint-override"><code>.list{display:flex;}
.img-block{width:80px; margin-right:20px}
.img-block img{max-width:100%}
p{margin:0;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="list"&gt;
&lt;div class="img-block"&gt;
  &lt;img src="https://image.flaticon.com/icons/png/512/26/26012.png" /&gt;
&lt;/div&gt;
&lt;p&gt;System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.&lt;/p&gt;
&lt;div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3537139|text|如果您希望图像和文本位于同一行，文本位于顶部，那么只需将此CSS应用于p标记即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3537140|p{
+++display:+flex;
}|code-block|syntax|javascript|3537141|entityMap^0|Z|1|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>If you want the image and text on the same line and the text to be on the top then just apply this CSS to the <code>p</code> tag</p>

<pre><code>p{
   display: flex;
}
</code></pre>


blocks|key|1351916|text|尝试使用display:+flex;。这是一个示例代码。希望它能帮到你。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1351917|​|1351918|.d-flex+{
++display:+flex;
}

.flex-row+{
++flex-direction:+row;
}

.align-items-center+{
++align-items:+center;
}

.image+{
++margin-right:+10px;
}|code-block|syntax|javascript|1351919|<div+class="d-flex+flex-row+align-items-center">
++<img+class="image"+src="https://via.placeholder.com/50"+/>
++<span>System+will+go+under+maintenance+from+15+Jan+2019+06.00+to+20+Jan+2019+10.00.+Sorry+for+any+inconveniences+caused.</span>
</div>|1351920|1351921|entityMap^0|4|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>Try using <code>display: flex;</code>. This is a sample code. Hope it helps you.</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-css lang-css prettyprint-override"><code>.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.align-items-center {
  align-items: center;
}

.image {
  margin-right: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="d-flex flex-row align-items-center"&gt;
  &lt;img class="image" src="https://via.placeholder.com/50" /&gt;
  &lt;span&gt;System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3537175|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3537176|.image+{
++margin-right:+10px;
++++float:left;
}|code-block|syntax|javascript|3537177|<div>
++<img+class="image"+src="https://via.placeholder.com/50"+/>
++<span>System+will+go+under+maintenance+from+15+Jan+2019+06.00+to+20+Jan+2019+10.00.+Sorry+for+any+inconveniences+caused.
++System+will+go+under+maintenance+from+15+Jan+2019+06.00+to+20+Jan+2019+10.00.+Sorry+for+any+inconveniences+caused.
++++++System+will+go+under+maintenance+from+15+Jan+2019+06.00+to+20+Jan+2019+10.00.+Sorry+for+any+inconveniences+caused.++System+will+go+under+maintenance+from+15+Jan+2019+06.00+to+20+Jan+2019+10.00.+Sorry+for+any+inconveniences+caused.
++</span>
</div>|3537178|3537179|这个方法是用浮子！|3537180|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.image {
  margin-right: 10px;
    float:left;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;img class="image" src="https://via.placeholder.com/50" /&gt;
  &lt;span&gt;System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.
  System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.
      System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.  System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.
  &lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>this method is with float !</p>


blocks|key|3537205|text|只需在img标记中添加对齐属性，值"left"，签出以下内容|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3537206|<img+src="https://image.flaticon.com/icons/png/512/26/26012.png"+align="left"+style="
++++width:+50px;
++++padding-right:+20px;
">|code-block|syntax|javascript|3537207|entityMap^0|3|3|B|2|I|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

<p>simply add <strong>align</strong> attribute in <strong>img</strong> tag, value "<strong>left</strong>", checkout this</p>

<pre><code>&lt;img src="https://image.flaticon.com/icons/png/512/26/26012.png" align="left" style="
    width: 50px;
    padding-right: 20px;
"&gt;
</code></pre>


blocks|key|1256990|text|如果您将文本包含在段落或跨度标记中，您将对文本的样式有更多的控制。由于您同时拥有文本和图像，所以最好使用div标记来包围p和img，而不是段落标记。在代码中，我保留了'p‘环绕声，并在文本周围使用了一个跨度，但请考虑这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1256991|如果要将图像和文本对齐到中心，则可以使用|1256992|vertical-align:middle;|code-block|syntax|javascript|1256993|如果要拆分文本，可以在span标记中插入br标记(正如我所做的)..如果它们超出了需求，就把它们拿出来。|offset|length|style|CODE|1256994|希望这能有所帮助|1256995|​|1256996|#sysdown+{
++width:+100%25;
}

img.calendar+{
++width:+70px;
++height:+70px;
}

#sysdown>span+{
++display:+inline-block;
}

img,
span+{
++vertical-align:+middle;
}|1256997|<p+id="sysdown">
++<img+class="calendar"+src="img/calendar-icon.png"+/>
++<span>System+will+go+under+maintenance+from+<br/>15+Jan+2019+06.00+to+20+Jan+2019+10.00.<br/>+Sorry+for+any+inconvenience+caused.</span>
</p>|1256998|1256999|entityMap^0|0|0|0|K|2|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|12|8|@$K|13|L|14|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|15|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|16|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|W|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|Y|$]]

<p>You'd have more control over styling your text if you contained it in within paragraph or span tags. As you have both text and an image you'd probably be better advised to use a div tag to surround the p and the img, rather than a paragraph tag. In the code, I've left the 'p' surround and used a span around the text, but consider this in future.</p>

<p>If you want to align both the image and text to center, then you could use </p>

<pre><code>vertical-align:middle;
</code></pre>

<p>If you want to break the text up, you can insert <code>br</code> tags within the span tags (as I have done).. Take them out if they are surplus to requirements.</p>

<p>Hope this helps</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-css lang-css prettyprint-override"><code>#sysdown {
  width: 100%;
}

img.calendar {
  width: 70px;
  height: 70px;
}

#sysdown&gt;span {
  display: inline-block;
}

img,
span {
  vertical-align: middle;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="sysdown"&gt;
  &lt;img class="calendar" src="img/calendar-icon.png" /&gt;
  &lt;span&gt;System will go under maintenance from &lt;br/&gt;15 Jan 2019 06.00 to 20 Jan 2019 10.00.&lt;br/&gt; Sorry for any inconvenience caused.&lt;/span&gt;
&lt;/p&gt;</code></pre>
</div>
</div>
</p>


<p>I need to align the text with the image.</p>

<p>I tried, align top, align center for the image. As well as float left and right for image and text respectively. Still no avail.</p>

<pre><code>&lt;p&gt;
  &lt;img class="calendar" src="img/calendar-icon.png" /&gt; 
  System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.
&lt;/p&gt;
</code></pre>

<p>have screenshot and post the result as above code and what i exactly want.</p>

<p><a href="https://i.stack.imgur.com/1XDqq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1XDqq.png" alt="enter image description here"></a></p>


align the text with the image

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我需要把文字和图像对齐。我试过，对齐顶部，对齐图像的中心。以及图像和文本的左、右浮动。还是没有用。<p>  <img class="calendar" src="img/calendar-icon.png" />   System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any

问将文本与图像对齐
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将文本与图像对齐EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将文本与图像对齐
EN