image and text not aligning in the middle?

Question

I am trying to image and text in middle.

  <div class="topHeader">
    <img src="Images/loginheader.jpg" />
    <span> Sample text</span>                        
  </div>

div.topHeader {
   height:70px;
   background-color:#868686;
   font-family: Segoe UI;
   font-size:40px;
   padding-left:30px;
}

JSFiddle

and remove padding-left, a little googling could of solved this... or a little css knowledge — Huangism, Mar 13 '14 at 17:53
i am really bad at css and if you guys dont like this post. I will delete it. — James123, Mar 13 '14 at 17:57
@James123 Since `` and `` are inline elements (replaced and non-replaced respectively) you could align them horizontally by using `text-align: center` to the parent element which is `.topHeader` as: http://jsfiddle.net/FrR72/5/ — Hashem Qolami, Mar 13 '14 at 18:00
i dont want image and text center of the page. I want both equal align. I mean now text showing bottom of the image. — James123, Mar 13 '14 at 18:04
@James123 But for vertical alignment you could use `div.topHeader img { vertical-align: middle; }` as: http://jsfiddle.net/FrR72/6/ — Hashem Qolami, Mar 13 '14 at 18:05
possible duplicate of [How do I vertically align text next to an image with CSS?](http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css) — Hashem Qolami, Mar 13 '14 at 18:34

score 1 · Answer 1 · answered Mar 13 '14 at 18:15

1

Apply

display:table; to your container and display:table-cell; vertical-align:middle; to the span.

check this: FIDDLE

answered Mar 13 '14 at 18:15

T J

42,762
13
83
138

score 0 · Answer 2 · 2014-03-13T19:09:54.923

0

Add img{float:left} and div.topHeader{line-height:70px}.

In fact, using line-height equal to the height of your div will center a one-lined text (and the image) vertically. Just don't forget to make your image to float in order to write text in the same line as the image. A Fiddle.

edited Mar 13 '14 at 19:09

answered Mar 13 '14 at 18:38

image and text not aligning in the middle?

2 Answers2