Insert image aligned with <h>

Asked

Viewed 41 times

-5

Based on the HTML below, how would you insert an image aligned before the first <h> in such a way that the image is positioned to the left. The <h> are positioned in the center.

<header>    
    <div id="wrapper">      
        <div id="header">
            <h>Fábrica:<%= request.getAttribute("display-fabrica") %></h>
            <h>|</h>
            <h>Doca:<%= request.getAttribute("display-doca") %></h>     
        </div>
    </div>          
</header>
html

  • What would be <h>? I don’t know that tag.

  • My home your CSS?

  • Opa, it follows: header { display:flex; Justify-content:center; height:52px; } header div h { color:#4163b1; font-Weight: Bold; font-size: 44px; }

  • The image has to stay before a specific H or it has to stay before everyone?

  • Before all.

  • You want the image to be "pasted" in <h> or pasted to the left of the window?

  • The image pasted on the left edge, the centered <h> s. The image and the horizontally aligned <h> s.

Show 2 more comments

1 answer

0


You can position the image absolutely inside the header. Just put the image as a child straight from the header and add property position: relative; in the header and position: absolute in the image, with left and top with the value 0.

How the image will have position absolute, will not interfere with <h>. Note that the image will have to be the same height as the header, that is to say, 52px:

header{
   display:flex;
   justify-content:center;
   height:52px;
   position: relative;
}

header div h { color:#4163b1; font-weight: bold; font-size: 44px; }

header > img{
   height: 52px;
   position: absolute;
   left: 0;
   top: 0;
}
<header>    
    <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
    <div id="wrapper">      
        <div id="header">
            <h>Fábrica:foo</h>
            <h>|</h>
            <h>Doca:foo</h>     
        </div>
    </div>          
</header>

  • Sam, it worked. Thanks!

  • Cool. Learn how to thank by reading the [tour] of the site.

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.