I am making an angular application with toolbar at top.
Placed a left menu button, logo and a button and a text at last.
Problem:
Here the logo at center is not center to the toolbar but it is
center to the first menu button and the other button after logo text.
Requirement:
The logo at the center needs to be center for the entire toolbar no
matter what is placed next to it.
Working Stackblitz:
https://stackblitz.com/edit/material-flex-toolbar-21bjwf
Just make toolbar position: relative and position the logo with
.logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
This way, logo will be in the middle, no matter what. Of course, don't forget to stick the actions always to the right (either add margin-left: auto to actions or add justify-content: space-between for whole toolbar)
Related
I've build my website using Wordpress (booo, i know) and I have a sticky menu (Menu from Elementor Pro, sticky header plugin from Sticky Menu (or Anything!) on Scroll) that always is showing on the top of the screen when you scroll.
To center this menu i've used custom CSS to the menu-element:
`
.center {
margin: auto;
width: 50%;
}
`
The problem is if i zoom in the browser, the menu gets off center the more i zoom. Until i refresh the page and it pops back in center.
Is there a way with CSS to keep the scaling and center of an object the whole time so it updates as i zoom. I want it always the same size, always in the center.
https://www.loom.com/share/fd55196094f942e98b800fcec7250228 Here is a videolink of the problem.
I've tried using:
`
.center {
margin: auto;
width: 50%;
}
`
It centers the block but when i zoom in or out, it jumps out of center until i refresh the page.
Website URL is https://visopro.se/
In the first image material-UI menu position is working fine
but when we change the button position align-right that time menu position is some pixel left not exactly right align menu.
the question is how to align exactly the right side menu position without any margin right side.
Code Link : Code Link
You have to override the style of the element MuiPaper-root (in your version of the styling):
element.style {
opacity: 1;
....
transform-origin: 168.188px 0px;
right: 10px;
/* left: 235px; */
}
Note in the above left is removed and add 10px to the right one.
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%;
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've set up my blog, doopist.com, using tumblr.
I'm trying to line up a twitter Follow button and Facebook Like button with my blog's header logo image. Currently, the Twitter icon is aligned at the top of the top banner while the FB button is closer to being centered. I am attempting to vertically center the buttons similarly to how the logo is centered.
I don't know much CSS and have tried to make a div style with vertical align middle but that caused the tumblr icon logos (random post, archives, etc.) to bump down to a new line, which is not desired.
I was curious if anyone had suggestions on how to vertically center the Twitter and FB buttons vertically. Thanks so much for your time and help.
Few CSS changes
#header, #header .inner { height:48px; position:relative; }
On your iframe add preferably in a class:
position: absolute;
left: 200px;
top: 10px;
On your span holding facebook:
position: absolute;
left: 365px;
top: 15px;
Again preferably in a class.
You really don't need the extra spans around each iframe. Just add a class to each iframe to specify the styles.