image and text not displaying center in html

Question

Hi in the below code logo and text was not displaying. when I am adding the style to vertical-align:center.I want image and text should me center

Any one help me

.logo{
  
  display:inline-block;
}
.logo a {
  font-size: 3em;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  font-family: "Roboto Slab", serif;
}
.logo a img{
    vertical-align:middle;
}
.logo p {
  color: #000;
  text-transform: uppercase;
  font-size: 1.2em;
  margin-top: -10px;
  display:inline-block;
}

<div class="logo">
      <a href="index.html"><img src="images/logo_sml.jpg"></a>
      <p>Newton Public School<br>
   Kanaka Nagar-Rt Nagar<br>
   Reach Out, Reach High, Reach Beyond</p>
      </div>

you want both vertical and horizontal align? – iamawebgeek Jun 11 '15 at 11:45 — iamawebgeek, Jun 11 '15 at 11:45
http://jsfiddle.net/soledar10/gcLqo78m/ – Dmitriy Jun 11 '15 at 11:51 — Dmitriy, Jun 11 '15 at 11:51

score 0 · Answer 1 · answered Jun 11 '15 at 11:43

0

Update log class like this:

  .logo{
       text-align: center;
       display:inline-block;
       width:100%;
  }

answered Jun 11 '15 at 11:43

Sanjay Kumar N S

4,653
4
23
38

inline displays cannot be centered vertically! – iamawebgeek Jun 11 '15 at 11:44
You want it horizontally center or vertically middle? – Sanjay Kumar N S Jun 11 '15 at 11:45

score 0 · Answer 2 · answered Jun 11 '15 at 11:49

For horizontal align change logo style to:

.logo {
  display: block;
  text-align: center;
}

And HTML to:

<div class="logo">
    <p><a href="index.html"><img src="images/logo_sml.jpg"></a></p>
    <p>Newton Public School<br>
    Kanaka Nagar-Rt Nagar<br>
    Reach Out, Reach High, Reach Beyond</p>
</div>

score 0 · Answer 3 · edited May 23 '17 at 10:26

0

If you want to center the div only horizontally, simply put the .logo div inside a center element, like this: <center><div class="logo">...</div></center>.
If you want to center it both horizontally and vertically, try out this answer of a very old question.

edited May 23 '17 at 10:26

Community

1
1

answered Jun 11 '15 at 11:54

nvi9

1,733
2
15
20

score 0 · Answer 4 · answered Jun 11 '15 at 11:59

Modify it

.logo{
       text-align: center;
       display:inline-block;
       width:100%;
  }
.logo a {
  font-size: 3em;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  font-family: "Roboto Slab", serif;
  padding-left: 50%;
}
.logo a img{
    vertical-align:middle;
}
.logo p {
  color: #000;
  text-transform: uppercase;
  font-size: 1.2em;
  margin-top: -10px;
  display:inline-block;
}

<div class="logo">
      <a href="index.html"><img src="images/logo_sml.jpg"></a>
      <p>Newton Public School<br>
   Kanaka Nagar-Rt Nagar<br>
   Reach Out, Reach High, Reach Beyond</p>
      </div>

image and text not displaying center in html

4 Answers4