html - 如何在与图片对齐的同时制作带有段落的标题?

标签 html css vertical-alignment

所以我想做的是在图像的一侧添加一个段落,我已经制作好了:

但是有一段的另一行:

但不是像图片上显示的那样,而是像这样:

有人可以帮助我吗?

这是 HTML:

<center>
  <h1 style="color:white;">
  <img align="middle" src="OOOgamelibrary.png">Game Library</h1>
  <p style="color:white;">PlaceHolder</p>
</center>

最佳答案

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
        padding: 50px;
    }
    
    .container {
        padding: 20px 40px 40px;
        max-width: 640px;
        display: flex;
    
    
    }
    
    .image {
            margin: 20px 30px 0 0;
            width: 200px;
            object-fit: contain;
            align-self: flex-start;
        }
    
    .text {
            flex: 1 1 auto;
        }
    </style>
    </head>
    <body>
    
    <div class="container">
        <img class=" image" src="https://dummyimage.com/600x400/d941d9/fff.png&text=dummy+image">
        <div class=" text">
            <h2>Lorem Ipsum is simply dummy text of the printing</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
        </div>
    </div>
    
    </body>
    </html>

关于html - 如何在与图片对齐的同时制作带有段落的标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57571532/

相关文章:

html - Chrome浏览器58.0.3029.81中不再播放HTML5音频标签

javascript - 基于第一个下拉菜单的第二个下拉选项

html - 垂直对齐元素以匹配相邻元素的中线

java - GWT - 如何将 ScrollPanel 中的内容居中

javascript - HTML5 视频播放器 onclick 播放/暂停不起作用

javascript - JQuerysiblings.data() 不返回正确的值

css - Laravel - 使用基于参数的 Controller 更改 View 中的特定 tr bgcolor

css - 带 CSS 的纹理文本?

css - jquery 数据表自定义标题悬停样式

html - 定位表格和多个图像