如何将图像与下面的文字对齐？

Question

我有一张图片，我想与下面的文字边缘对齐。下面的文字是居中的，但我无法弄清楚它是如何保持左侧对齐的。 我的代码是：

<img src="Logo.png" style="margin: auto"/> 
<h1 style="text-align: center;>The Collaborative Observer</h1> 
<p style="text-align: center; font-size: 100%; padding-left: 6cm">The best thing that has happened to ICE since ICE.</p>

我还使用填充功能来对齐底部文本，我想知道是否有更好的方法来做到这一点。 上面的代码是针对颜色修改的，但看起来像这样。

Answer 1

只需插入Exception in thread "main" java.io.FileNotFoundException: popData.txt (The system cannot find the file specified) at java.io.FileInputStream.open0(Native Method) at java.io.FileInputStream.open(Unknown Source) at java.io.FileInputStream.<init>(Unknown Source) at java.io.FileInputStream.<init>(Unknown Source) at dd.main(dd.java:13)

即可

Answer 2

似乎很好地利用了<figure>和<figcaption>。

来自 HTML5 Doctor ：

  

figure元素表示一些流内容，可选地带有标题，它是自包含的，通常从文档的主流中引用为单个单元。

     

图元素可用于注释文档主要内容中引用的插图，图表，照片，代码清单等，但可以在不影响文档流程的情况下将其移除主要内容 - 例如，页面一侧，专用页面或附录。

为什么不......

<figure>
    <img src="Logo.png" style="margin: auto"/>
    <figcaption>
        <h1>The Collaborative Observer</h1> 
        <p>The best thing that has happened to ICE since ICE.</p>
    </figcaption>
</figure>

<figure>和<figcaption>都是块级元素，因此除非另有说明，否则它们将占用其容器的整个宽度。这将允许下面的标题延伸到每侧的元素边缘，然后图像将正确排列。然后将以下内容添加到CSS文件中......

figure img {
    margin: auto;
}
figcaption {
    text-align: center;
}
figcaption p {
    font-size: 100%;
    padding-left: 6cm;
}

Answer 3

我认为这就是你想要的：

<div style="text-align: center;">
  <div style="left:10%;display:inline;margin:0 auto;">
    <img src="http://almadaenmisr.com/templates/logo/1410252800_1266901625.jpg" width="100px" style="" />
  </div>
  <h1 style="display:inline;">The Collaborative Observer</h1> 
  <br />
  <p style="text-align: center; font-size: 100%;padding-left: 15%;display:inline;">The best thing that has happened to ICE since ICE.</p>

</div>

Float图片剩下＆amp; inline文字。

虽然这是工作代码，但我建议使用bootstrap / skeleton等框架进行设计，以便更容易使用，并且可以随时使用所有屏幕尺寸。

Answer 4

enter image description here

当img＆amp;在一个div框中的文本，必须设置'vertical-align：text-bottom'，以便图像下的文本。对不起我的英文

<style>
.logo-box{display: table; text-align: center;}
.logo-box img{height: 100px; width: 100px; vertical-align:text-bottom}
</style>

<div class="logo-box">
	<img src="Logo.png" /> 
	<h3>The Collaborative Observer</h3> 
</div>
<p style="text-align: center; font-size: 100%; padding-left: 6cm">The best thing that has happened to ICE since ICE.</p>