'HTML and CSS Help getting Logo in top blue bar

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


Solution 1:[1]

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>

Solution 2:[2]

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 class="container">
            <div class="topbar">
                <img
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAkUlEQVRIS91V0QoAIQjL///oq4MzwtpNoYjysczNzUrS4pDF9dM+gKfE252U+OuS5cHD7KCCsjwqESrACiuBfQDK0DtlyCvqwXQAy1yZRdehB9FCKL8DQJpHO6iFv/tTPYiayrxRYhcCIM29ktgb3klkAaKP3cUASON2fEf+MAndr2n7+YxAEUEKwKaH7Z8PkAExm6QZQlT61QAAAABJRU5ErkJggg=="
                />
            </div>
            <div class="content">{{content}}</div>
        </div>
    </body>
</html>

UPDATE:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions