I'm trying to create HTML layout where the header is 110px high and the content has a vertically and horizontally centered box.
Here is what I have (https://jsfiddle.net/9L58mn08/):
body {
margin:0;
background-attachment: fixed;
background-color: #464646;
background-image: url("https://pixabay.com/get/e837b2092dfc003ed1534705fb0938c9bd22ffd41db419439cf5c17ea5/beach-1236581_1920.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.header {
background: #333333 none repeat scroll 0 0;
height: 110px !important;
padding-top: 0 !important;
width: 100%;
}
.frame_container {
left: 50%;
margin-top: 110px;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.frame{
background:red;
padding:20px;
}
<body>
<div class="header">
Header Content
</div>
<div class="frame_container">
<div class="frame">
This is the centered Content
</div>
</div>
</body>
For some reason the frame is not vertically centered, where am I going wrong?
Apply the margin-top, the half of the height:
.frame_container
{
left: 50%;
margin-top: 55px;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
working demo
I'd try som fancy css math.
.frame_container
{
left: 50%;
top: calc(50% + 28px);;
position: absolute;
transform: translateX(-50%);
}
Or use Bhojendras version.
Related
I have a div which contains an image and overlay:
<div class="container">
<div class="overlay"></div>
<img src="tablet.png" alt="tablet">
</div>
How can I make an overlay with shadow like ?
While it surely can be done via CSS or SVG, most likely that shadow is just a background image where the shadow is already drawn.
However, here's an example of how you could think of it in css:
.scene {
position: relative;
width: 200px;
height: 200px;
background: #60c18b;
overflow: hidden;
}
.object {
position: absolute;
width: 40px;
height: 45px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_121330.png&f=1);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: top left;
}
.object:after, .object:before {
content: '';
display: block;
width: 100%;
height: 100px;
background: linear-gradient(rgba(0,0,0,0.3), transparent);
transform: skew(-45deg, 0deg);
transform-origin: top left;
position: absolute;
}
.object:before {
transform: translateY(2px) skew(0deg, -45deg);
transform-origin: top right;
width: 100px;
height: 100%;
position: absolute;
right: 0;
background: linear-gradient(to left, rgba(0,0,0,0.3), transparent);
}
<div class="scene">
<div class="object"></div>
</div>
Note that this is just for fun, it's not perfect and I wouldn't use this on a production site.
I have some text which could be different on different pages. I need to make it align vertically middle. There is some problem because of less width for text.
.vertical-text-block {
width: 40px;
height: 100%;
position: absolute;
top: 0;
left: 0;
float: left;
background-color: grey;
}
.vertical-text {
display: block;
position: relative;
top: 50%;
white-space: nowrap;
font-size: 10px;
text-transform: uppercase;
transform: translateY(-50%);
transform: rotate(-90deg);
}
<div class="vertical-text-block">
<span class="vertical-text">ASHWANI SHARMA</span>
</div>
It should look like the image attached below:
I added right: 50%, transform-origin: right and removed transform: translateY()
.vertical-text-block {
width: 40px;
height: 100%;
position: absolute;
top: 0;
left: 0;
float: left;
background-color: grey;
background-image: linear-gradient(darkgrey 0%, darkgrey 50%, lightgrey 50%);
background-repeat: no-repeat;
}
.vertical-text {
display: block;
position: relative;
top: 50%;
right: 50%; /* 1 */
white-space: nowrap;
font-size: 10px;
text-transform: uppercase;
/*transform: translateY(-50%);*/ /* 2 */
transform: rotate(-90deg);
transform-origin: right; /* 3 */
}
<div class="vertical-text-block">
<span class="vertical-text">ASHWANI SHARMA</span>
</div>
i made a small change to the DOM and was able to achieve it,i.e centering the text , irrespective of its length .
Made a small change to the DOM .
<div class="vertical-text-wrap">
<div class="vertical-text-block">
</div>
<span class="vertical-text">American Leadership Index</span>
</div>
Added an extra wrapper , hope it is allowed.
.vertical-text-wrap {
position: absolute;
height: 100%;
margin: 0px 20px;
}
.vertical-text-block {
width: 40px;
height: 100%;
position: absolute;
top: 0;
left: 0;
float: left;
background-color: grey;
}
.vertical-text {
display: inline-block;
position: relative;
top: 50%;
left: -35%;
font-size: 10px;
text-transform: uppercase;
transform-origin: 50% 50%;
transform: translateY(50%) rotate(-90deg);
}
<div class="vertical-text-wrap">
<div class="vertical-text-block">
</div>
<span class="vertical-text">American Leadership Index</span>
</div>
Catch here is , when text becomes shorter , the left position of span.vertical-text has to be adjusted.
But hey , it is vertically centered :)
I think you can also do it this way http://codepen.io/Danstan/pen/QGWggO
Just add the translateX and translateY correctly on .vertical-text everything will be at the center
.vertical-text {
font-size:8px;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
transform: translateX(-50%) translateY(-50%) rotate(90deg); white-space: nowrap;font-size: 10px;}
I want to overlap two divs and then center them vertically and horizontally.
I am able to overlap the divs and center them vertically, BUT horizontal centering is not working.
In the css code, I have a class that I copied from some website and it functions to center any div (hope so!).
Here is the fiddle to it:
http://jsfiddle.net/o3c8768h/1/
HTML:
<div id="micWidgetContainer">
<div id="micWidgetCircle" class="centerme"></div>
<div id="micWidget" class="centerme">
</div>
</div>
CSS:
#micWidgetContainer {
width: auto;
height: 500px;
position: relative;
margin: 0 auto;
}
.centerme {
margin: 0 auto;
display: table;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#micWidgetCircle {
width: 200px;
height: 200px;
position: absolute;
display: block;
margin: 0 auto;
border-radius: 50%;
background: #D0CBCB;
}
#micWidget {
display: block;
width: 200px;
height: 100px;
position: absolute;
border-radius: 40%;
background: #EEE;
z-index: 10;
}
if you want to center vertically and horizontally a block you have to use the position:absolute property and the left, top, bottom and right statements.
i rewrited your .centerme class in order to make it works
.centerme {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
http://jsfiddle.net/o3c8768h/9/
I have a relatively div positioned on top of a fixed position div and I would like to vertically align this first div. Is there a way to do this? This is my current markup:
<div class="overlay">
<div id="dialogInvoice">
content
</div>
</div>
The CSS:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
width: 390px;
height: 722px;
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: relative;
}
Any suggestions on this? I did try the line-height method but this is apparently only working when using mere text.
If your element does not have a fixed width or height then you can't use the other solutions without using javascript to calculate the values.
Here is an alternative.
#dialogInvoice {
width: 390px;
height: 722px;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
what you need to add to your css of #dialogInvoice is
top: 50%;
and change the margin to
margin: 361px auto;
(361 is 722 / 2)
it will first push your container half way down the page and then push it back up the required value, which is exactly half of its height (361px)
here is a jsfiddle for better understanding.
This CSS may do what you require:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
top: 100px;
bottom:100px;
left:100px;
right:100px;
}
I am trying to center an image(door)(within a div) both vertically and horizontally on another div which has a background image.
Have been stuck on this for a while..
This is what i tried so far:
CSS:
html,body{
height:100%;
}
#container{
margin:0 auto;
text-align: center;
height:100%;
min-height: 100%;
height: auto !important;
width:100%;
background: url('http://i.imgur.com/Zd7A3rZ.png') no-repeat 0 0;
background-size: 100% 100%;
}
#background{
margin:0 auto;
text-align: center;
max-height: 100%;
width:100%;
}
#doorDiv{
position: absolute;
top :50%;
left: 50%;
border: solid 4px;
}
Conditions:
I need the door image smaller,like around 25% of the height of the background image.
The whole thing should be responsive
Please don't make any change to the elements.
Here's my fiddle
If you only need ie9+ I suggest you use the transform solution:
http://jsfiddle.net/37zHh/4/
#doorDiv{
position: absolute;
top :50%;
left: 50%;
border: solid 4px;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 25%;
}
and for the door scaling:
#doorDiv img{
max-width: 100%;
}
But as I said above, this only works ie9+ http://caniuse.com/#search=transform
Right o! So I have provided the code that has changed. You can clearly see whats happening here. Just centering the img using absolute and margin: auto then setting a max-width and max-height and that about does it.
HTML:
<div id="container">
<img id="door" src="http://i.imgur.com/iXiL1CS.jpg" />
</div>
CSS:
#container {
margin:0 auto;
text-align: center;
position: relative;
height:100%;
min-height: 100%;
height: auto !important;
width:100%;
background: url('http://i.imgur.com/Zd7A3rZ.png') no-repeat 0 0;
background-size: 100% 100%;
}
#door {
position: absolute;
top: 0;
bottom:0;
right: 0;
left:0;
margin: auto;
max-width:10%;
max-height:25%;
width: auto0;
height: auto;
border: solid 4px;
}
DEMO HERE