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.
Related
I created a menu bar through bootstrap that when the window width is smaller, the nav turns into a button menu. When the window width is made smaller, the button on the right is pushed down and not aligned with the logo on the left.
For the footer, I created two columns using col-md-6 and applied text-align: left, text-align: right to each column since they were not off to the side. Now when the window width is smaller, the same thing happens: the text/column on the right is pushed down and not aligned with the text on the left.
Both the nav and footer do not vertically align properly. I've tried setting a negative margin-top on both the button and text that are being pushed down; I've also tried using pull-left and pull-right and that made no difference either. I also have no media queries but I'm not sure if that is an issue.
Here is an example and the code: http://jsfiddle.net/w92w4dak/
Any ideas on how to vertically align the nav/footer properly would be appreciated.
The .navbar-toggle button needs to be inside the .navbar-header div to achieve the desired vertical alignment.
The footer columns should have the class .col-xs-6 instead of .col-sm-6 to ensure they stay as 50% of the screen width at all screen sizes (including mobile view)
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.
The bottom div is moved further to the left, why is that, how can I align them better?
Image of how it looks
Link to markup
Any help would be appreciated.
Ok, this is because of the Items inside the stats div. The bottom one has more "items" so it is moved further to the left (because it is wider and floated right). To fix this, I would recommend giving that div a fixed width, maybe 400px. so <div style="float: right; width: 400px;> on line 30.
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;