CODEWITHSUNDEEP
htmlcssvertical-alignment
Cioss
Cioss

Reputation: 33

How do i make a headerwith a paragraph while being aligned to a picture?

So what I want to do is a Paragraph on the side of an image, that I already made :

But with another line with a paragraph:

But instead of being like how it is shown on the picture, it's like that:

Can someone help me?

Here is the HTML:

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

Upvotes: 0

Views: 50

Answers (3)

Kleber Germano
Kleber Germano

Reputation: 770

There is a lot of ways to do that, you can use Flexbox or Grid CSS too, and here is just one way, the principle is of using "float" In this way is needed a bit more code to adjust, see here

#bg_game{ max-width:350px; height:130px; background:#111;  overflow:hidden;}
#bg_game figure{ margin:0px; width:30%; float:left; height:100%;  overflow:hidden; display:block; padding:20px;}
#bg_game img{ max-width:100%; height:auto;}
#bg_game div{float:left;  height:100%; padding-left:10px; overflow:hidden; max-width:70%;   color:#fff;}
#bg_game h2{ margin-top:25px;}
#bg_game p{ margin-top:-5px;}
<div id='bg_game'>
<figure>
<img src="https://cake.imgix.net/m/88ZhML3x76yX_1546370106139.png">
</figure>
<div>
<h2>Game Library</h2> 
<p>PlaceHolder</p>
</div>
</div>

Upvotes: 0

Stanley Fernandes
Stanley Fernandes

Reputation: 432

    <!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>

Upvotes: 1

Bhanu
Bhanu

Reputation: 351

Use this instead.

.wrapper {
display: flex;
}

img{
margin-right: 20px;
}
<div class="wrapper">
<img src="https://via.placeholder.com/80x80">
<div class="paragrapg">
<h3>This is heading</h3>
<p>This is the paragraph</p>
</div>
</div>

Upvotes: 0

Related Questions