center a picture and headning

Question

I working on centering a picture and heading in a head section. What I want is to center both where the picture is twice higher than a heading. I have gotten one above another:

.body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}

header h1 {
  font: 400 100px/1.3 'Berkshire Swash', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0, 0, 0, 0.15);
  border: 1px solid red;
}

.container {
  width: 90%;
  margin-left: 40px;
  margin-right: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid gray;
}

header {
  background: gray;
  text-align: center;
}

.logo {
  display: inline-block;
  margin: 0 auto;
  border: 1px solid white;
}

<header>
  <div class="container">
    <img src="my_logo2.png" alt="Logo" class="logo">
    <h1>Auto Service</h1>
  </div>
</header>

Could anyone explain me how I can obtain a desire result, please?

https://stackoverflow.com/questions/7055393/center-image-using-text-align-center — Temani Afif, Jan 14 '18 at 19:39
https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div?s=2|170.6446 — Temani Afif, Jan 14 '18 at 19:39
Possible duplicate of [CSS center text (horizontally and vertically) inside a div block](https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block) — Temani Afif, Jan 14 '18 at 19:39
https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css — Temani Afif, Jan 14 '18 at 19:40
https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css — Temani Afif, Jan 14 '18 at 19:46
Thank you so much, Temani! The topic: CSS center text (horizontally and vertically) inside a div block worked for me and I understood my issue! How can score your answer? — Kordi1818, Jan 14 '18 at 20:14
no need to score my answer as it's not my answer ;) .. simply consider upvoting the useful question and answer you used. And next time it's better to do a small search in the site as you have a chance to find what you need and we avoid having duplicate questions :) — Temani Afif, Jan 14 '18 at 20:17

score 0 · Answer 1 · answered Jan 14 '18 at 19:41

is that what you want ?

    <html>
 <style>
 .body{
      font: 15px/1.5 Arial, Helvetica, sans-serif;
      padding:0;
      margin:0;
      background-color:#f4f4f4;
    }
    header h1 {
      font: 400 100px/1.3 'Berkshire Swash', Helvetica, sans-serif;
      color: #2b2b2b;
      text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
      border: 1px solid red;
    }

    .container {
      width: 90%;
      margin-left: 40px;
      margin-right: 0;
      padding: 0;
      overflow: hidden;
      border: 1px solid gray;
    }
   header{
      background: gray;
      text-align: center;
    }
    .logo{
       display: inline-block;
       margin: 0 auto;
       border: 1px solid white;
    }
 </style>
 <body>
 <header>
 <center>
      <div class="container">
        <Br><img src="my_logo2.png" alt="Logo" class="logo">
          <h1>Auto Service</h1>
          </div>
    </center>
      </header>
   <body>
</html>

score 0 · Answer 2 · answered Jan 14 '18 at 19:43

0

You want to center your items under div?

.container {
  text-align: center;
}

img, h1 {
  margin: auto;
}

answered Jan 14 '18 at 19:43

Mike Tung

4,735
1
17
24

center a picture and headning

2 Answers2