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.
Related
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?
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 use bootstrap to have a responsive design and I want to center one div in the screen
I tested that :
style="position:fixed;top:50%;left:50%;"
but the top left corner of the div is in the center, I don't want put negative values of margin to make him reponsive
how an I solve this issue
To fix a div at the center use,
style="margin: 0 auto;"
It will align div at the center.
These CSS properties center the image of any size within a container of any size:
display:table-cell;
text-align:center;
vertical-align:middle;
This is a perfect fluid image centering, however, table-cell property gives me unwanted white space on the bottom. How to avoid it? See this:
http://jsfiddle.net/8DeLQ/1/
If the container contains no text content, you could possibly add font-size: 0; to the container's style. I think the unwanted whitespace is related to text content.
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