I have a Bootstrapped HTML/ CSS. I need to vertically center an image inside a Bootstrap grid.
On lowering the screen size, the image tends to go upwards.
Like this. I need the image to always be vertically centered ( Drawn in Red box)
The fiddle for the issue is here.
What change should be made in the CSS that image is always vertically centered in the responsive bootstrap grid?
Related
http://i.imgur.com/tcCubM4.png
http://pastebin.com/K6htZtJ9
As you can see the image is shifted to the left, i want it to either be centered or the entire image when you click it, how would i be implement that in CSS?
I tried using display: inline-block and display: block.
I was taking a look at the navbar element in Twitter Bootstrap to see how they vertically center the elements inside the navbar because that is something I am always struggling with.
I always have to resort to 'random' margin/padding values which I've been told aren't good because they are magic numbers that only work in that specific context.
Surprisingly I was not able to discovery anything that actually vertical centers the elements – no line-height trickery or anything really, no display: table-cell.
The .navbar-brand class has a line-height of 20px (like the links inside .navbar-nav) and a padding of 15px, but how does that center anything? How do they do that?
Here you can see the code of the navbar: http://getbootstrap.com/components/#navbar
The navbar uses top and bottom padding to vertically center the text:
padding-top: 15px;
padding-bottom: 15px;
They don't vertically center the text.
I tested this by adding text to a navbar element using inspect:element in Chrome. Then I forced width the same way. The text wrapped to the next line. All lines were lined up at the top, not centered.
I can align the "Learn More" in the center for this responsive layout, but the sides are not clickable to the banner in the background. I outlined the paragraph tag in yellow. What can I do to keep Learn More in the center and to not use width:100% on it? What seems tricky is keeping it in the center for all responsive display resolutions, so a left-margin:45% isn't a good solution.
Uploaded a copy:
http://meowzen.com/pacific-wild.org/initiatives
Remove the wrapping paragraph, set the link width in css (width: 90px;) and make its margin: 0px auto; or you can play with the top and bottom margins as you wish.
I need to align image at the middle of the page. I used margin:auto to align middle horizontally.
How do I align the div block middle vertically. I have below conditions to follow.
I can not mentioned width and height of div or image.
I can not use margin-top in pixels.
Here is my jsfiddle.
You were doing it almost right. Here's your fixed fiddle http://jsfiddle.net/joplomacedo/cDD7m/4/
The thing is, you need an element with display: table wrapping one with display: table-cell for the table-cell to behave like it's supposed to.
Will background image technique fit your needs?
background: url(my-image.jpg) center center no-repeat;
I've got a div with a background color blue, that needs to be centered in another div with background green -- just for looks. I centered the blue div inside the green div with a "margin: 10px auto". Now, I need the text inside this blue div to be left justified, not centered, so I put the text inside a div and gave it a margin of zero. That didn't work.
Obviously I'm confused about centering things in general, and am still coming up the css centering / positioning learning curve. Any thoughts / comments appreciated. Thanks.
You need to place a:
text-align: left
style on the DIV containing the text.
margin: auto only works for centering DIVS, has no effect on actual text