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
In this JSFiddle there is an example to vertically center the logo
Vertically center logo
line-height: 50px;
Related
I'm working on a personal website template but I can't style the image and the text in the navbar.
I want to fix the aspect ratio of the image to center the navbar, so independently from the height of the navbar, the image will always look the same.
I want to center the text vertically
Make CONTACT into Contact
I'm not using boostrap or other frameworks.
You should check the flex box property, this is really useful. Here is some documentation on the subject and here is an example on how to build the layout you want using flex box.
1.- I didn't understand this one, you want to 'fix the ratio' but the ratio is already fixed and you can change the size of it using percentage on height and width.
2.- Add the next lines to the navbar css:
display: flex;
align-items: center;
that will center vertically all the elements in your navbar, including the image.
3.- Try this:
.navbar li:last-child a {
text-transform: lowercase;
}
or text-transform: capitalize if you want the first letter capitalized.
I've tried numerous methods but I cannot get the logo and the li elements to align properly in the header.I also cannot seem to increase the height of the header.I've tried different methods but no success.
Basically what I want is first to increase the header's size (I have a navbar-static-top header) and make the logo and the ul elements appear properly.However I have no ideea how I can do that.I also want to keep the logo's current dimensions.It does work with the current header if I resize the logo but that's not what I am after.
Bootply
[1]: http://www.bootply.com/BTSfbDudpZ
Add following css
.navbar-brand {
height: auto;
}
.navbar-nav{
margin-top: 50px;
}
I can not get the menu div centered inside the header without changing the responsive menu structure.
I use a template from JA and the client wants to have the logo centered above the menu
I was able to get the logo centered within the main div but the menu is sticking to the left and i think i tried almost every possible solution.
here is the link to the site
http://dev.turnim.com/clients/antonio_j3/
Here is one option..
.nav-collapse.collapse {
text-align: center;
}
.t3-megamenu {
display: inline-block;
}
Tested in the browser.. it works.
I would like the logo and the image slider to center on my responsive site.
Basically, the logo and the slider are next to each other on a full size screen. I can make the slide disappear when the site isn't wide enough and the logo shrinks.
What I want to do is make the logo and the slider center once they are no longer next to each other.
Please help: http://ranchocordovaeventscenter.com/
Thank you,
Matt
You can center the child elements of hgroup tag by setting margin: 0 auto;text-align:center on the hgroup
this will cause the contents to be centered within that div
Put the logo and slider in a div and give it a fixed width. If this div has #inner id, the solution will be:
#inner {
width:1000px;
display:block;
}
the given answers will only work if you use both of them, centring with margin: 0 auto; only works if a width is specified, and having a div just display as a block will not change the appearance.
Try the css:
div {
width: 500px;
margin: 0 auto; }
along with other styling, and it should center
I've set up my blog, doopist.com, using tumblr.
I'm trying to line up a twitter Follow button and Facebook Like button with my blog's header logo image. Currently, the Twitter icon is aligned at the top of the top banner while the FB button is closer to being centered. I am attempting to vertically center the buttons similarly to how the logo is centered.
I don't know much CSS and have tried to make a div style with vertical align middle but that caused the tumblr icon logos (random post, archives, etc.) to bump down to a new line, which is not desired.
I was curious if anyone had suggestions on how to vertically center the Twitter and FB buttons vertically. Thanks so much for your time and help.
Few CSS changes
#header, #header .inner { height:48px; position:relative; }
On your iframe add preferably in a class:
position: absolute;
left: 200px;
top: 10px;
On your span holding facebook:
position: absolute;
left: 365px;
top: 15px;
Again preferably in a class.
You really don't need the extra spans around each iframe. Just add a class to each iframe to specify the styles.