My intention is to center a header <div>, but i'm not able to do it.
header {
height: 54px;
margin:0px auto;
width: 1150px;
background: #13171B;
position: fixed;
left: 0;
top: 0;
z-index: 990;
margin-bottom:10px;
}
Please help me.
margin: 0 auto can center elements in static or relative position only. Since your div is in fixed position you may try with
header {
position: fixed;
height: 54px;
width: 1150px;
...
left: 50%;
margin-left: -575px; /* 1150px/2 */
top: 0;
}
if you don't know in advance the width, a better solution involves css3 transformations, e.g.
header {
position: fixed;
height: 54px;
...
left: 50%;
transform: translateX(-50%);
top: 0;
}
My go to solution for centering is thus;
.parent {
position: relative;
}
.toCenter {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
This positions the .toCenter element vertically and horizontally centered to it's .parent.
If you needed to position only horizontally, each 'translate(-50%-50%)' in the element's style would become 'translateX(-50%)'. Similarly, if vertical alignment was required, you could use 'translateY(-50%)' instead.
The important thing here is that there is a limit to browser support. Essentially everything except IE will work fine, with anything from IE9 backwards causing issues. There are poly fills and hacks to get things to work however, and they're usually neater than having to create additionally classes or style sheets just for one piece of functionality.
It's because of the fixed position. Add/change the properties below:
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
Related
I have this css:
.records-table-row-checkbox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I have a problem with top positioning in Edge browser, been trying to solve it for nearly two days. I want to change top:50%; to top:19px; Only for Edge browser. The rest of the browsers should have top:50%;.
I've tried this :
*::-ms-input-placeholder {
top: 19px;
}
But Edge still takes the 50%.
For the checkbox, you can use ::-ms-check selector only supported in Internet Explorer and Microsoft Edge. An example usage below:
input[type=checkbox]::-ms-check {
top: 19px
}
#supports (-ms-ime-align:auto) {
.records-table-row-checkbox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}}
trollsirl.blogspot.com When I minimize my browser my website's title is all the way to the right. How do I make my title centered when my browser is minimized?
.Header.description {
position: absolute;
top: 0%;
left: 50%;
right: -96%;
transform: translate(100%, 180%);
}
h1 {
position: absolute;
top: 5%;
left: 183%;
right: -430px;
bottom: 10px;
transform: translate(10%, 50%);
}
Try to use media queries or body size, look here. Create a css that centeres the header when size is small, for example with margin: 0 auto in the specific class.
I'm trying to have a popup that auto sizes to fit content based on screen resolution, while also remaining in the dead center of the screen both horizontally & vertically.
This is where I'm at so far:
.reveal-modal {
background: none no-repeat scroll 0 0 #eee;
border-radius: 5px;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
padding: 2%;
position: absolute;
visibility: hidden;
z-index: 101;
}
.reveal-child {
display: block;
position: relative;
width: 100%;
height: 100%;
}
The effect is close, but still doesn't work in certain resolutions. In some places the container is too large while others it is too small. I'd ideally like the container to be only as big as the content requires.
The demo can be viewed on 104.131.228.107 and clicking the Register button
I dont understand you, but if u want something like this site you linked, than watch here how to do popup.
u can use jQuery for that.
$('.button').click(function(){
$(".content").animate({opacity:"0.3"},500,function(){
$(".popup").fadeIn();
});
});
$(".popup").click(function(){
$(".popup").fadeOut(function(){
$(".content").animate({opacity:"1"},500);
});
});
This may be what you're looking for?
I made a fiddle where I made the width static so there is no unnecessary whitespace in the modal.
This one scales to the 50% width and height just as you had it and stops at the minimum for your content using the "min-width" and "min-height" properties.
If you want to create different styles for different screen resolutions use media queries
Hope it helped
#myModal {
position: absolute;
width: 50%;
height: 50%;
min-width:500px;
min-height:230px;
left: 50%;
top:50%;
border-radius: 5px;
background-color: #fff;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I want to create effect of page corner cliping like in turn.js, I know that I need two divs the outside one need to have positive rotation and inside one need the same amount but negative, and both need translate, but I don't know how to calculate the right values.
How can I do this for each corner?
Here is my try.
Here is my try, for a cut-off of 20px:
.page-wrapper {
position: absolute;
overflow: hidden;
width: 400px;
height: 300px;
top: 50px;
left: 50px;
right: auto;
z-index: 12;
background-color: blue;
}
.outter-wrapper {
position: absolute;
overflow: hidden;
-webkit-transform-origin: 100% 50%;
-webkit-transform: translateX(-20px) rotate(45deg);
right: 0px;
bottom: -100%;
width: 200%;
height: 200%;
}
.inner-wrapper {
-webkit-transform-origin: 100% 100%;
-webkit-transform: rotate(-45deg) translateX(20px);
background-color: yellow;
width: 50%;
height: 50%;
right: 0px;
position: absolute;
top: 0px;
}
You need to make the outter wrapper bigger than the inner wrapper; if not you are clipping in places that you didn't intended. I have done it 20%%; this way the math is easier.
Also, you need to adjust it carefully so that you still know the coordinates of the transform origin.
And you don't really need to move it in x and y, it's enough to mevo it horizontally.
demo
I am looking to vertically center a <div> in the viewport (browser window) without resorting to Javascript (pure HTML and CSS only). I have several constraints:
The div must be centered vertically in the viewport. Methods I have seen only support centering inside another <div>, which is not what I want.
The height of the div is not known.
Other constraints:
The div must be aligned to the right.
The div has a constant width.
The div must support padding.
Other elements will be placed on the web page. The div acts as a menu.
The div must support a background colour/image.
This gets me close to what I want, but not exactly:
#nav {
position: fixed;
right: 0;
top: 50%;
}
However, the top of the nav is in the middle, not the middle of the nav.
Is there some technique which allows me to center my div with these constraints?
What's that? Taking 8 years to get the answer to a problem is too much?
Well, better late than never!
You got really close to the solution. I'd do it with transform: translate():
#nav {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
}
According to Can I use?, it is supported by everything except for IE8- and Opera Mini (which, to be honest, is a pretty good support).
I'd recommend you overkill it a bit and just add all of the vendor prefixes (just to make sure!):
#nav {
position: fixed;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
Here's a snippet to show it to you in action:
#nav {
right: 0;
top: 50%;
position: fixed;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #ccc;
padding: 20px;
}
<div id="nav">
ABC<br/>
DEFGH<br/>
IJKLMNO<br/>
PQRS<br/>
TUVWXYZ
</div>
Hopefully it's still relevant to you! (who am I kidding, it's been 8 years)
you can use this as one of the solution.
<style>
#containter {
height: 100vh; //vh - viewport height
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#content {}
</style>
<div id="containter">
<div id="content">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
If the item is set to position: fixed or position: absolute:
top: 50%; left: 50%; transform: translate(-50%, -50%)
If the item is set to position: relative, use:
margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%)
(More info at the source.)
Example:
Run the snippet and then resize this page (or rotate device). The box stays centered in the "snippet viewport".
.myContainer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid RebeccaPurple;
}
.myThing {
width: 100px;
height: 100px;
background-color: CornflowerBlue;
}
<div class="myContainer">
<div class="myThing myContents">
</div>
</div>
The easiest way is not to use a div - use a table with one row and one cell. Vertical alignment is woefully unsupported in CSS and you will find yourself coding up the wall and across the ceiling to accomplish it.
I understand the semantic argument against what I have just proposed - I am a proponent of semantic markup in most cases. However I also believe in using the right tool for the right job. I believe it is best to sacrifice a little purity in this case for a simple solution that will work.