How to let the center div in the mask div align center?
the styles:
<style type="text/css">
.mask {
position: absolute; top: 0px;
filter: alpha(opacity=60);
background-color: #777;
z-index: 1002; left: 0px;
opacity:0.5; -moz-opacity:0.5;
width: 100%;
height: 100%;
}
.center {
margin-left: auto;
margin-right: auto;
}
</style>
the html:
<div id="mask" class="mask">
<div class="center">MASC</div>
</div>
How to let the center div in the mask div align center?
I created a shade layer, and in it there is a div, I want the div align center, but my style code seems not work.
Let you try set position property with the fixed value.
.mask {
position: absolute; top: 0px;
filter: alpha(opacity=60);
background-color: #777;
z-index: 1002; left: 0px;
opacity:0.5; -moz-opacity:0.5;
width: 100%;
height: 100%;
}
.center {
position: fixed;
top: 50%;
left: 50%;
}
Add style text-align: center to your center div.
<style type="text/css">.mask {
position: absolute;
top: 0px;
filter: alpha(opacity=60);
background-color: #777;
z-index: 1002;
left: 0px;
opacity: 0.5;
-moz-opacity: 0.5;
width: 100%;
height: 100%;
}
.center {
text-align: center;
}
</style>
Yeah, You should specify the width of the .center div.
.center {
margin-left: auto;
margin-right: auto;
width: 100px;
}
To center the text you can align center
.center {
text-align:center;
}
There are two good choices here:
1.Use table layout
.mask{
display:table;
}
.center{
display:table-cell;
}
2.Use Flex layout
.mask{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
Related
I have a fixed, 100% height menu on the left and I need to create a shadow effect on its right side that would disappear after while.
See the figure that illustrates this.
How to create this effect?
Here is a fiddle: http://jsfiddle.net/52VtD/7787/
HTML:
<nav id="main-menu">
<h1>Hello</h1>
A
B
C
D
</nav>
CSS:
#main-menu {
width: 320px;
height: 100%;
top: 0;
z-index: 1000;
position: fixed;
background-color: #b4bac1;
}
You can achieve this with CSS3: box-shadow and transform.
In the example below the box-shadow is applied to a pseudo element of .menuContainer which sits underneath the .menu element and is rotated by 1° using CSS3s rotate() transform property.
html,body { /* This is only here to allow the menu to stretch to 100% */
height: 100%;
margin: 0;
}
.menuContainer {
position: relative;
height: 100%;
width: 100px;
}
.menuContainer::after {
content: "";
position: absolute;
z-index: 1;
top: -10px;
bottom: 0;
left: -7px;
background: rgba(0,0,0,0.3);
box-shadow: 10px 0 10px 0 rgba(0,0,0,0.3);
width: 100px;
transform: rotate(1deg);
}
.menu {
background: #f00;
height: 100%;
width: 100px;
position: relative;
z-index: 2;
}
<div class="menuContainer">
<div class="menu"></div>
</div>
JSFiddle
You could fake it with a pseudo-element rather than using a box-shadow as follows
JSfiddle Demo
CSS
#main-menu {
width: 50px;
height: 100%;
top: 0;
z-index: 1000;
position: fixed;
background-color: pink;
}
#main-menu:after {
content:"";
position: absolute;
top:0;
left:100%;
height:100%;
width:5%;
background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%);
}
I have a div (fixed) which acts like a pop up:
<body>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
</body>
This css allows the container to be horizontally centered (having a 100% width makes everything behind it unclickable; thus, I set it to 1px):
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 1px;
z-index: 9999;
}
.popup-item {
display: block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
However, I am unable to center .popup-item due to the parent element .popup-container being smaller than its child. How do I center .popup-item while still being able to click it (pointer-events: none entirely disabled it)?
Vote to Close almost has it, but with the 1px width, the element doesn't get centered.
Do this instead:
.popup-container {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
text-align:center;
height:0px;
}
.popup-item {
display: inline-block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
This will make it centered, because the container is 100% wide. However, pointer-events:none; will allow you to click through to anything below it.
A couple of solutions.
First, you can make the child of the container centered using translateX() transform: http://jsfiddle.net/Yjz5R/. The same effect can be accomplished using negative margins, but the width for the container's child has to be set: http://jsfiddle.net/9Qmza/.
CSS:
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
Or second, you can make the container "immune" to click events:
Markup:
<input type = "checkbox" id = "clickToggle" />
<label for = "clickToggle">Click me</label>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
Styles: http://jsfiddle.net/CVfHt/.
.popup-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(200, 200, 200, 0.5);
pointer-events: none;
}
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: all;
}
input[type = "checkbox"] {
display: none;
}
input[type = "checkbox"] + label {
cursor: pointer;
}
input[type = "checkbox"]:checked ~ div {
display: none;
}
Lastly, a question/comment. If you do not want the container to be visible, then why use it at all? Just keep the markup of the child and get rid of the container: http://jsfiddle.net/yvc4E/.
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto; /* remove this line - unnecessary*/
margin-right: auto; /* and this line, remove */
width: 1px;
z-index: 9999;
text-align: center; /* add this */
}
.popup-item {
display: inline-block; /* change to inline-block */
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
I am trying to vertically and horizontally center a div inside another div that has the overflow: hidden I have successfully been able to horizontally center it, but not vertically.
HTML
<div class="outer">
<div class="inner">
<div class="content">
<p>Alot of content</p>
</div>
</div>
</div>
CSS
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
display: inline-block;
position: relative;
bottom: -50%;
right: -50%;
}
.content {
position: relative;
top: -50%;
left: -50%;
width: 500px;
height: 500px;
}
FIDDLE
Why is my top: -50% being ignored, but my left: -50% is working as expected?
DEMO
Actually fiddle is not clear.
I don't know about horizontal center. So I added it. But if you don't want it skip it.
For vertically center, you may try this:
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
display: inline-block;
position: relative;
text-align:center; //horizontal center
}
.content {
position: relative;
display: table-cell; //<-vertical center
text-align: center; //<-vertical center
width: 500px;
height: 500px;
}
You can always center any element using following code without negative margin hack.
The content will automatically align center from top, bottom, left, right
HTML:
<div class="outer">
<div class="content">
</div>
</div>
CSS:
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
position: relative;
}
.content {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
margin: auto;
}
Taken from this article, you can use a class like this as long as you have a declared height:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
If you add that class to your outer div everything should work.
I was trying to avoid using translate3d to solve this for older IE support, but in the end couldn't figure out why my top: -50% didn't work. :(
Here is the CSS I ended up with.
.outer {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.content {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 500px;
}
FIDDLE
I'm trying to center my div .down-arrow horizontally but without success. The DIV is absolute positioned but margin:0px auto; does not seem to be working. What is the issue? thanks
http://jsfiddle.net/7UNrP/
HTML:
<header>
<div class="down-arrow">arrow</div>
</header>
CSS:
header {
position: relative;
width: 100%;
height: 600px;
min-height: 300px;
margin-right: auto;
margin-left: auto;
background-image: url('http://lorempixel.com/output/nature-q-c-1020-711-1.jpg');
background-size: cover;
background-position: center center;
background-color: rgb(222, 222, 222);
}
.down-arrow {
position: absolute;
margin:0px auto;
bottom: 20px;
display: inline;
padding: 10px;
color: #FFF;
border: 0;
font-weight: 400;
font-size: 12px;
background: red;
-webkit-animation: icon 1.2s infinite;
}
#-webkit-keyframes icon {
from {
opacity: 1;
bottom: 20px;
}
to {
opacity: 0;
bottom: 10px;
}
}
The problem is that you haven't told the arrow div where to be except bottom:20px so it defaults to left:0;
JSfiddle Demo
You need to add this to your arrow CSS
left:50%; /*push the div halfway over*/
-webkit-transform:translateX(-50%); /* bring it back by half its own width */
transform:translateX(-50%);
You might want to refer to this post which had much the same issue. I go into further detail regarding this solution.
Reference Question
The issue is due to using margin:0 auto with the display:inline and position: absolute. You can easily center it by applying text-align:center to the header as your inner content has an inline layout.
Example
You could use
text-align:center;
in header css like this
header {
position: relative;
width: 100%;
height: 600px;
min-height: 300px;
margin-right: auto;
margin-left: auto;
background-image: url('http://lorempixel.com/output/nature-q-c-1020-711-1.jpg');
background-size: cover;
background-position: center center;
background-color: rgb(222, 222, 222);
text-align: center;
}
EDIT:
This aligns the .down-arrow div in the center horizontally and keep it 20 pixel away from the bottom side of the its container
.down-arrow {
position: absolute;
margin-left: 50%;
/* bottom: 20px; */
/* display: inline; */
padding: 10px;
color: #FFF;
border: 0;
font-weight: 400;
font-size: 12px;
background: red;
-webkit-animation: icon 1.2s infinite;
}
I want to create a hover effect on an image that when hovered over multiple colored divs appear. I figure I can do this with CSS, but am having trouble getting the result I want.
What I am aiming for it to look like in the end:
HTML:
<div class="row thumbrow">
<ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-4 thumbgrid">
<li>
<div class="thumb">
{{ cms:page_file:thumb_one.image:image}}
<span class="center">{{ cms:page:thumb_one.text:string }}</span>
<div class="yellow">
</div>
</div>
</li>
</ul>
</div>
CSS:
.thumb {
display:inline-block;
position: relative;
height: 170px;
overflow: hidden;
}
.thumb:after {
background: rgba(255,255,255,.8);
content:'';
display: block;
height: 170px;
left: 0;
opacity: 0;
padding: 20px;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.thumb:hover:after {
opacity: 1;
padding: 20px;
transition: opacity .4s;
}
.thumb:hover .yellow {
content:'';
display: block;
height: 170px;
left: 0;
opacity: 1;
position: relative;
top: 0;
width: 100%;
z-index: 5;
background: #f9d33a;
}
span.center {
color: white;
position: relative;
top: -100px;
z-index: 3;
}
As comments, the essential part was the missing of css position:absolute for the elements .yellow and .center
I have run up a demo here
The use of the selectors :after are not necessary , in the demo the CSS has been shortened to :
.thumb {
display:inline-block;
position: relative;
height: 170px; width:100%;
overflow: hidden;
}
.thumb .yellow, .thumb .center { display:none; }
.thumb:hover .yellow {
content:'.'; display: block;
position: absolute; z-index: 1;
bottom:10px; left: 10px; right:10px; top: 10px;
background: #f9d33a; opacity: 0.5;
}
.thumb:hover .center {
display:block; color: white;
position: absolute; z-index: 2;
top: 20px; left: 20px; right: 20px; bottom:20px;
}
Some values ( like the top, bottom, left, right offsets I made up ), the key part is the position:absolute
You can use hover selectors along with sibling selectors to display on hover, similar to the suckerfish menu:
http://jsbin.com/qerucawe/3
http://jsbin.com/qerucawe/3/edit