HTML and CSS Help getting Logo in top blue bar-CodePudding

Trying to edit the template for a helpdesk and want to add our logo img src and center it in the blue bar at the top, but unable to figure it out. Can someone help me?

Here is the default code:

<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
  </head>
  <body style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.15;-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0;font-size: 15px;font-weight: 400;line-height: 1.5;color: #212529;text-align: left;background-color: #f8f9fa !important;padding: 10px 0 88px 0;'>
    <div style='padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;width: 700px;'>
      <div style='position: relative;display: -ms-flexbox;min-width: 0;word-wrap: break-word;background-color: #fff;background-clip: border-box;border: 1px solid rgba(0, 0, 0, 0.125);border-radius: 0.25rem;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;width: 100%;border-top: 15px solid #005984;'>
        <div style='x-ms-flex: 1 1 auto;xflex: 1 1 auto;padding: 1.25rem;background-color:#fff;'>
          {{content}}
        </div>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

If I understood you correctly something like that ?

            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
                    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
                line-height: 1.15;
                -webkit-text-size-adjust: 100%;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                margin: 0;
                font-size: 15px;
                font-weight: 400;
                line-height: 1.5;
                color: #212529;
                text-align: left;
                background-color: #f8f9fa !important;
            }

            .container {
                margin: 10px auto;
                width: 700px;

                display: flex;
                flex-flow: row wrap;

                box-sizing: border-box;
                box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            }

            .container .topbar {
                display: flex;

                flex: 1 1 100%;
                padding: 15px;

                justify-content: center;

                background-color: #005984;
                border-radius: 0.25rem 0.25rem 0 0;
                border-bottom: 3px solid rgba(0, 0, 0, 0.1);
            }

            .container .content {
                display: block;

                flex: 1 1 100%;
                padding: 1.25rem;
                background-color: #fff;
            }

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    </head>
    <body>
        <div >
            <div >
                <img
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAkUlEQVRIS91V0QoAIQjL///oq4MzwtpNoYjysczNzUrS4pDF9dM gKfE252U OuS5cHD7KCCsjwqESrACiuBfQDK0DtlyCvqwXQAy1yZRdehB9FCKL8DQJpHO6iFv/tTPYiayrxRYhcCIM29ktgb3klkAaKP3cUASON2fEf MAndr2n7 YxAEUEKwKaH7Z8PkAExm6QZQlT61QAAAABJRU5ErkJggg=="
                />
            </div>
            <div >{{content}}</div>
        </div>
    </body>
</html>

CodePudding user response：

flex is about the easiest way to do this.

#container{
    display:flex;
    justify-content:center;
    background-color:lightblue;
}


#container2{
margin-top: 20px;
background-color:lightblue;
text-align:center;
}

#container2 img{
  vertical-align:middle;
}

<div id='container'>
    <img src='https://via.placeholder.com/25x25'>
</div>


<div id='container2'>
    <img src='https://via.placeholder.com/25x25'>
</div>