This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
I can't get a div #buttonwrap to center on my site. I have tried every option that is suggested in this similar post. But it still doesn't work. And what is strange is that #backgroundwrap works fine with the same code. I have linted my CSS and HTML markup, but no help.
Hope someone can help me solve this issue, it has been driving me crazy and delete nearly all my code! The full code is online here: http://setup.industries/projects/masqueradeclassix/
.buttonwrap {
margin: 0 auto;
position: relative;
width: 100%;
display: block;
float: none;
}
/* parent */
#container {
width: 100%;
height: 100%;
}
width: 100%;
margin: 0 auto;
It's 100% wide, with auto margins.
So the margins are computed to put it in the center.
i.e. 0 on the left and 0 on the right.
It is centered.
Alright, this is what you need. I really wanted you to find out the solution from there, but here you go:
.buttonwrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
Preview
If the width is 100%, it makes no sense to center the element using margin: 0 auto; - it already fills the width of its container. Make the width a value smaller than 100%, or a fixed pixel value.
Related
This question already has answers here:
Hide scroll bar, but while still being able to scroll
(42 answers)
Closed 7 years ago.
I've run into trouble while trying to hide scrollbars from certain divs.
I found some solutions on the forum but they never really match my case so I'm still struggling with the problem.
My problem: I'm trying to hide scrollbars in a div that is nested inside another div that has non fixed size. (they are set to 100% of the body).
Here's the HTML:
<div id="events">
<div id="event-list"></div>
<div id="event-details"></div>
</div>
And the CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#events {
width: 100%;
height: 100%;
}
#event-list {
float: left;
width: 50%;
height: 100%;
background-color: pink;
}
#event-details {
float: right;
width: 50%;
height: 100%;
background-color: cyan;
}
Codepen available here
I would like #event-list and #event-details to have no scrollbar but still be scrollable. If you have any idea (css? js? jquery?), I'll take it!
Thanks in advance,
alex
You can do a nested div with the outer div's width set to 100% with overflow:hidden and the inner div set to a width of 105% (you can fine tune this value) and overflow set to overflow:scroll
JSFiddle here
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
I created a page that has three tables. The second table is inside a div with overflow: auto.
My problem is precisely in this table. I need the entire page has never more than 100% in height.
- The first table should always be visible at the top of the page;
- The third table should always be visible at the bottom of the page;
- The second table should have their height varied according to the space remaining to complete 100% of the browser.
Does anyone know how to solve my dilemma?
Here is a demonstration of the code: http://jsbin.com/omeRUtIr/7/edit?html,css,output
You need to do something like that:
#header {
position: absolute;
top: 0px;
width: 100%;
height: 50px;
}
#content {
position: absolute;
top: 50px;
bottom: 50px;
overflow: auto;
width: 100%;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
}
You can see the result here: http://jsbin.com/omeRUtIr/13/edit
You can also use percentage (instead of fixed height) if you want each table to have one third of the height for example. You will get something like this: http://jsbin.com/omeRUtIr/15/edit.
thiv.net/mobile needs to work on mobile, and it does, however when I turn my ipod to vertical, it changes drastically, my problem is i need the whole lot, textbox, button and image to be centered vertically, or change on rotate. I think centering the div vertically is the best option, so what css would i use?
Currently i have tried:
.center
{
position:absolute
top:40%;
bottom:40%;
height:20%;
}
But that doesn't work, so maybe it should only be centered after rotating?
Any ideas?
Try following CSS :
.center {
width: 100px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
you can also follow the link of stack-overflow : Best way to center a <div> on a page vertically and horizontally?
If you know the height:
div.centered{
height: 100px;
top: 50%;
margin-top: -50px;
}
Optional: position: absolute | relative | fixed depending on what you want to achieve
the margin-top should always be 0 - half of the height of your div to center.
This question already has answers here:
Centering images in a div vertically
(3 answers)
Closed 9 years ago.
I have two columns in my HTML page.
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
Each of them occupies half of the page
#left {
float: left;
width: 50%;
}
#right {
float: left;
width: 50%;
}
I want to center a picture in the right column. I know that I can make it horizontally centered by doing margin-left: auto; margin-right: auto;. How can I make it vertically centered?
The first issue I see is that there is no height specified for the height of the left and right divs; height should be set to 100% or any value to your liking. To vertically center the image, we can use absolute-positioning. We would set the dimensions for the image (which is good practice in any case) and then set the top:50% and left:50% attributes. This would push the image outside the box though, so we add negative margins that are half the width and height of the image. This will vertically and horizontally align the image in a div every time!
Here's the updated CSS:
#left, #right {
width: 50%;
height:100%;
float:left;
position:relative;
}
#right img {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
margin-top: -40%; /* Half the height */
margin-left: -40%; /* Half the width */
}
Take a look at this JSFiddle: http://jsfiddle.net/bYF7F/2/.
I know this question has been marked as answered, but you did mention that the height and width on the image was not ideal. So i would like to suggest another solution.
Add:
display: -webkit-flex;
display: flex;
to the right div, and:
margin: auto;
to the image. I think this is what you were after. See fiddle http://jsfiddle.net/Fqa7b/
If you use a TABLE instead of a DIV it will center automatically.
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I have a css class defined so I can make a div to use all the browser's viewport, the rule is the following:
.fullscreenDiv {
background-color: #e8e8e8;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
}
Now I want the text inside the div to be in the exact center of the screen so, vertical align center and horizontal align middle, but I can't seem to find the proper way to do so.
It only needs to work on webkit based browsers.
I already tried to add a P element inside with display set to table-cell (a common way of centering text) without luck.
Any suggestions?
The accepted answer works, but if:
you don't know the content's dimensions
the content is dynamic
you want to be future proof
use this:
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
More information about centering content in this excellent CSS-Tricks article.
Also, if you don't need to support old browsers: a flex-box makes this a piece of cake:
.center{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Another great guide about flexboxs from CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The standard approach is to give the centered element fixed dimensions, and place it absolutely:
<div class='fullscreenDiv'>
<div class="center">Hello World</div>
</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}
DEMO
There is no pure CSS solution to this classical problem.
If you want to achieve this, you have two solutions:
Using a table (ugly, non semantic, but the only way to vertically align things that are not a single line of text)
Listening to window.resize and absolute positionning
EDIT: when I say that there is no solution, I take as an hypothesis that you don't know in advance the size of the block to center. If you know it, paislee's solution is very good
text-align: center will center it horizontally as for vertically put it in a span and give it a css of margin:auto 0; (you will probably also have to give the span a display: block property)