CODEWITHSUNDEEP
htmlcssimageheaderalignment
Lila
Lila

Reputation: 121

Center logo in html

I have an logo in the header of the page and I want to make in centered. This is my html:

body {
  width: 90%;
  margin: 0 auto;
}
header {
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #b5b5b5;
}
.logo {
  width: 250px;
  height: 150px;
  text-align: center;
}
<body>
  <header>
    <div class="row">
      <div class="logo-row">
        <img src="resources/img/logo.png" alt="logo" class="logo">
      </div>
    </div>
  </header>

Upvotes: 8

Views: 54998

Answers (6)

Pim
Pim

Reputation: 728

Add the following CSS rule for the class applied to the img element (in your case .logo).

.logo {
    display: block;
    margin: 0 auto;
}

Upvotes: 1

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17964

Giving text-align: center to the .logo-row, you may achieve the desired output:

header {
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #b5b5b5;
}
.logo-row{
  text-align: center;
}
.logo {
  width: 250px;
  height: 150px;
  text-align: center;
}
  <header>
    <div class="row">
      <div class="logo-row">
        <img src="resources/img/logo.png" alt="logo" class="logo">
      </div>
    </div>
  </header>

Upvotes: 2

Syed Talha hai
Syed Talha hai

Reputation: 109

Add this code to your CSS Section

.logo-row{ text-align: center; }

Upvotes: 1

Rodrigo
Rodrigo

Reputation: 63

Try this.

img {

display:block;
margin-right:auto;
margin-left:auto;

}

Upvotes: 0

Richard Hamilton
Richard Hamilton

Reputation: 26444

You need to add a width to the logo-row class and use margin: 0 auto.

body {
    width: 90%;
    margin: 0 auto;
}

header {
    margin-top: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #b5b5b5;
}

.logo-row {
    width: 250px;
    margin: 0 auto;
}

.logo {
    width: 100%;
    height: 150px;
    text-align: center;
}
<body>
  <header>
    <div class="row">
      <div class="logo-row">
        <img src="resources/img/logo.png" alt="logo" class="logo">
      </div>
    </div>
  </header>

Upvotes: 3

j08691
j08691

Reputation: 208022

Add a new CSS rule for the div containing your image:

.logo-row {
  text-align: center;
}


body {
  width: 90%;
  margin: 0 auto;
}
header {
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #b5b5b5;
}
.logo {
  width: 250px;
  height: 150px;
  text-align: center;
}
.logo-row {
  text-align: center;
}
<body>
  <header>
    <div class="row">
      <div class="logo-row">
        <img src="resources/img/logo.png" alt="logo" class="logo">
      </div>
    </div>
  </header>

Upvotes: 1

Related Questions