Good afternoon,
I am trying to center an image button vertically inside a drawer (for the test I am using a black box). I have managed to center the box horizontally, but I have tried everything, but could not center it vertically. I was able to center it once, but on the phone it would not be centered anymore, or when I change orientation of the screen. So what I want is to always display box in the vertical middle of the drawer, no matter what is the orientation or screen size.
The entire page is here: https://www.cs.drexel.edu/~cm3283/MobileVer/index.html
I will appreciate any help.
All you need to do is to add a style to parent of black box:
position: relative;
top: 50%;
Related
I am currently creating a fixed header which looks a bit like this.
https://gyazo.com/e0bab8ba195e33110b19123c7fc3c568
The logo is always at the left, the small buttons always at the right, and the menu buttons in the middle. I gave the logo left: 0, the menu buttons using the code below this text, and the small buttons right: 0.
left: 50%;
transform: translateX(-50%);
What I want to happen: The buttons in the middle are always centered until one of the things at the side (the logo or the small buttons) pushes it somewhere else. When the bar gets way too small everything gets pushed off at the right, but this only happens when all white space is filled up. (At this point my mobile layout will activate)
Here is the problem: When the screen gets too small this happens:
https://gyazo.com/044c02f056fd7d76d34cf4e1a912af45
My second try was using inline-flex. This is the code I tried to use (applied on the whole header):
display: inline-flex;
position: fixed;
justify-content: space-between;
flex-flow: nowrap;
white-space: nowrap;
overflow: hidden;
The problem here is, that the logo on the left is wider than the small buttons on the right, and because I use space-between the middle buttons get offcentered by default.
(It is not that clear in this picture, but they are definitly offcenter)
https://gyazo.com/e9f89e7918dc1f2d3059b1938b62536d
Is there some option in flex I missed? Or is there a better way to solve this problem?
EDIT: A friend suggested I add an invisible element to the small buttons on the right, which is exactly wide enough to keep the middle buttons in the center. Altough this works, it still has SOME whitespace because of the invisible element.
you could add an equal min-width to the logo and the small buttons, that way the remaining space is distributed evenly.
I would like to create a page with a logo that is always horizontally dead centre and upon opening the page before anything is clicked on is also vertically centred.
I have created the page with the logo centred using simple margins:
margin: auto;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
height: 100px;
This works great with a full page background, but I would like to have a number of small 50px square divs to the right of the logo that will have icons for login, mail, info and if someone clicks on those divs they expand to show login fields etc.
Now the problem I have is I am very used to using 2/3 column layouts but I have no idea how to keep the logo dead centre if the div next to it expands.
(I dont mind if the logo moves up the page as the div next to it expands or whether the logo stays dead centre and the div expands downwards.)
This does not have to be compatible with anything before IE9
I may not fully understand your question but have you considered displaying the logo as a background-image:?
If that's not the solution you're looking for you should consider placing the logo in the first column of a table, and the boxes on the right in a second column of that table. Then vertically and horizontally center that table.
If you don't want to use a table you can achieve something similar with divs.
I'm building this portfolio website, and it needs to be vertically centered. The only problem is, when the window is resized vertically down past a certain point, the menubar is cut off. How can I get the site to stick when it touches the ceiling of the viewing area?
http://home.comcast.net/~swiftmail/aspect/index.html
You need to add "stick" class dynamically with JavaScript.
#vertical_center .stick {
top: 0;
height: auto;
margin-top: 0;
}
You may look at JS workaround to do this:
Get the size of the screen, current web page and browser window
I have menu that scrolls vertically with the page however it also scrolls horizontally if you move horizontal scroll bar to the right you will see what i mean.
I need to eliminate horizontal scrolling and only keep vertical, any easy way to do it with css?
http://jsfiddle.net/NNnkU/4/
You need to add in a width to the page_frame of 100% as below
.page_frame {
background-color:#006600;
color:#ffffff;
width: 100%;
}
I am having difficulty tuning the placement of text on my web page. Items on the page seem to float about and not lock down. I need them to stay static with respect to the background image.
For example, I have a div Item called "leftMenu" I want the left menu to stay approximately 20 pixels to the left of the background image. Things seemed to work until I had to center the background image. Now that the background image is centered, I seem to have lost the ability to lock down div positions with respect to the background.
When the screen is full size things look good, but when the page size is altered the leftMenu drifts all over the place. I'm currently going through a lot of trial and error using absolute and relative positioning, but I can't seem to get the right combination of settings to make the item stay put irrespective of the page size.
Page: http://107.22.173.10/
user: test2
pass: abc111
Any advice would be greatly appreciated.
Instead of using a big background taking a div of text and position it absolutely to the center, why not get a div that's exactly the size of the background image and center it using:
CSS:
html, body{
height:100%;
position:relative;
}
div.siteWrapper{
background: !VALUE;/* your background*/
padding: 0 0 0 0; /* the space top, right, bottom, left from the edge of the bg image to the content box of the image*/
width: !VALUE; /* width of your background - (left + right padding)*/
margin:100px auto; /* this will center your site horizontally and move it away from the top*/
}
HTML:
<body>
<div class="siteWrapper">
//everything in here
</div>
</body>
As per your requirement acc to me you have to create a wrapper div in which your whole stuff should be present and you need to use jquery/javascript to calculate the position from top, right, left, bottom of the wrapper to make it in center of the screen. For example lightbox of jquery. because when monitor size varies then resolution changes and the position of background image change according to that but content is set according to css set on the id/class on the elements.