How to render/align logo in the center using twitter-bootstrap

Question

I am beginner and learning web development and I have got one svg logo, and I want to set it up vertically-center of the nav bar. I am not sure how to do that properly.

Issue: the image/svg is going out of the navbar-brand.

Image has a logo class where I have put a width like below:

.logo {
    width: 145px;
}

Question: Why does my logo is going out of the parent navbar brand class. Also, I tried vertical-align: middle but this also does not help. Can someone guide me how to put svg logo, so that it remains vertically-center and do no go out of parent div.

Attempt 1:

vertical-align: middle in logo class

Attempt 2:

center-block in navbar-brand

https://stackoverflow.com/questions/23400234/centering-brand-logo-in-bootstrap-3-navbar Already answered here — Kartik Puri, Oct 04 '17 at 07:03
That is different. It talks about making to logo horizontally center. — Unbreakable, Oct 04 '17 at 07:05
@KartikPuri: I did not ask my question properly, added more texts now. — Unbreakable, Oct 04 '17 at 07:07

score 0 · Answer 1 · answered Oct 04 '17 at 07:23

0

In this JSFiddle there is an example to vertically center the logo

Vertically center logo

 line-height: 50px;

answered Oct 04 '17 at 07:23

Monica

11
1

How to render/align logo in the center using twitter-bootstrap

1 Answers1