I want the elements inside .bannerinner class to be in the exact middle alignment of the .banner class but it doesn't really work that way. I'm open to any advices, any help would be greatly appreciated, thanks from now.
I have this .banner class "absolute" to my "relative" background
.banner {
background-color: rgba(209, 29, 155, 0.212);
padding: 8px 15px;
overflow: hidden;
height: 10vh;
width: 150vh;
max-height: 10vh;
min-height: 10vh;
position: absolute;
bottom: 9vh;
}
and also inside this .banner class there is a .bannerinner class
.bannerinner {
padding: 0;
margin: 0;
left: 2vh;
position: absolute;
bottom: 50%;
vertical-align: middle;
}
Set .innerbanner to left:50% and top:50%. This puts the upper left corner of .innerbanner to the center of .banner.
Then transform .innerbanner back to -50% of its own width and height. This sets the center of .innerbanner exactly to the center of .banner.
See code example:
div {
box-sizing: border-box;
}
.background {
position: relative;
width: 80%;
height: 400px;
padding: 0.5em;
margin: 0 auto;
background-color: #bbb;
}
.banner {
position: absolute;
width: 80%;
height: 200px;
padding: 8px 15px;
left: 10%;
bottom: 2vh;
overflow: hidden;
background-color: rgba(209, 29, 155, 0.212);
}
.bannerinner {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
transform: translate(-50%, -50%);
text-align: center;
background-color: #fff;
border: 1px solid #000;
}
<div class="background">
<p>Background: relative</p>
<div class="banner">
<p>Banner: absolute </p>
<div class="bannerinner">
<p>Inner Banner: absolute</p>
</div>
</div>
</div>
Related
I'm having problem with making the button appear on the center of screen. The button is supposed to be in the center of the screen, but somehow my css is making in that the center of the button is at the left top corner. Any one know why?
Some more details:
I want it to be like this:
how it should look
But instead it looks like this:
how it looks
Anyone can help?
Here is the code:
html, body {margin: 0; height: 100%; overflow: hidden}
img
{
max-width: 100%;
height: auto;
position: relative;
top: 33%;
}
.obj1
{
width: 20%;
height: 100%;
background: rgb(136, 44, 44);
float:left;
position: relative;
}
.obj2
{
width: 20%;
height: 100%;
background: rgb(255, 255, 255);
position: relative;
float:left;
}
.obj3
{
width: 20%;
height: 100%;
background: rgb(0, 0, 0);
position: relative;
float:left;
}
.obj4
{
width: 20%;
height: 100%;
background: rgb(42, 75, 148);
position: relative;
float:left;
}
.obj5
{
width: 20%;
height: 100%;
background: rgb(72, 114, 48);
position: relative;
float:left;
}
.obj6
{
width: 20%;
height: 100%;
background: rgb(119, 39, 112);
position: relative;
float:left;
}
#show-more
{
background: #1594e5;
color: #fff;
font-family: calibri;
display: block;
width: 140px;
font-size: 24px;
text-transform: uppercase;
padding: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
<body>
<div class="obj1">
</div>
<div class="obj2">
</div>
<div class="obj3"></div>
<div class="obj4"></div>
<div class="obj5"></div>
<a id="show-more">Show More</a>
</body>
Using position absolute and top/left you point to a top-left corner of the element.
Additionally use transform: translate(-50%, -50%); to move the button to top and left of 50% of his height/width
The button will not stay with the image when I adjust the size of the browser. I tried the position:absolutein the img div and the responsive didn't work well with the position property. Obviously the float:left doesn't work either as written in CSS.
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group img {
z-index: 2;
text-align: center;
margin: 0 auto;
border: 1px solid red;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
float: left;
position: relative;
z-index: 1;
margin-top: 200px;
margin-left: 330px;
top: 40px;
}
<section class="section6">
<button>REQUEST AN INTERPRETER</button>
<div class="img-group"><img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters"></div>
<div class="bg-bar"></div>
</section>
See on JSFIDDLE of what I did.
You're using fixed sizing units and this is not how you make responsive pages.
If you want the button to stay in the middle, you have to position it absolutely inside the relative div.
Something like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relative {
position: relative;
padding: 10px;
background: #0fc0fc;
animation: reduce 2s ease-in-out infinite;
height: 50px;
}
button.centered {
position: absolute;
left: 50%;
/* Kind of makes the anchor point of the element to be in the horizontal center */
transform: translateX(-50%);
}
#keyframes reduce {
0%,
100% {
width: 100%;
}
50% {
width: 50%;
}
}
<div class="relative">
<button class="centered">I'm in the middle</button>
</div>
You are better off changing the image to be a background image on that div and moving the button to be inside of it.
HTML:
<section class="section6">
<div class="img-group"><button>REQUEST AN INTERPRETER</button></div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
z-index: 2;
text-align: right;
margin: 0 auto;
border: 1px solid red;
position: relative;
background: url('http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg') no-repeat;
background-size: cover;
width: 400px;
height: 370px;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
position: relative;
z-index: 5;
top: 100px;
margin-right: 20px;
}
Try this:
HTML:
<section class="section6">
<div class="img-group">
<img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters">
<button>REQUEST AN INTERPRETER</button>
</div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
position: relative;
}
.img-group img {
text-align: center;
max-width: 100%;
margin: 0 auto;
border: 1px solid red;
}
.img-group button {
display: block;
position: absolute;
z-index: 10;
margin-left: -75px;
top: 50%;
left: 50%;
max-width: 100%;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
}
So how can I set an element's inner position fixed to middle of screen? I was able to set the x-axis of the div by using text-align: center;.
So how could I center the y-axis just like I did the x-axis? And if that can't be done, what new method must I use?
Code:
.fixed{
text-align: center;
width: 100%;
height: 100%;
padding: 0px;
position: fixed;
background-color: #00FF00;
top: 0px;
overflow: hidden;
z-index: 99;
}
.popup{
display: inline-block;
width: 90%;
max-width: 900px;
min-height: 300px;
border: 2px solid rgba(72, 72, 72, 0.4);
margin-bottom: 50px;
margin-top: 20px;
}
<div class="fixed">
<div class="popup"></div>
</div>
I updated your fiddle. Just make your popup class position fix and make top,left,bottom,right = 0 then margin:auto. See this updated fiddle.
.popup{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
https://jsfiddle.net/norxpmbr/
For .popup, try replacing this:
margin-bottom: 50px;
margin-top: 20px;
With this:
position: relative;
top: 50%;
transform: translateY(-50%);
Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
So this is what I did to your code- removed the margins for popup and centered using transform and position: relative:
.popup{
display: inline-block;
width: 90%;
max-width: 900px;
min-height: 300px;
border: 2px solid rgba(72,72,72,0.4);
margin : 0;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
revised fiddle
Snippet below:
.fixed {
text-align: center;
width: 100%;
padding: 0;
position: fixed;
background-color: #00FF00;
height: 100%;
top: 0;
overflow: hidden;
z-index: 99;
}
.popup {
display: inline-block;
width: 90%;
max-width: 900px;
min-height: 300px;
border: 2px solid rgba(72, 72, 72, 0.4);
margin: 0;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
<div class="fixed">
<div class="popup">
</div>
</div>
I'm trying to create a "button" with 2 sections (each is 50% of the height of the div) separated by an horizontal bar. Each of the sections has centered text. The size of the button is going to be manipulated using javascript, and I'm trying to avoid also using javascript to position the elements inside the "button".
What I have so far is http://jsfiddle.net/u5u7d31p/2/, but i'm having a problem centering the horizontal bar. If I change the position of the separator to relative, the bar is centered, but then it changes the position of the bottom part of the text. I can also change the margin to a static value (margin: 0 63px;) to center it, but I would like to avoid it if there is an easier solution that doesn't require javascript.
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
Any ideas? Thanks.
All codes are ok. Just put this css below to .img_overlay .separator class.
Full code is below:
.img_overlay .separator {
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
right: 0;
}
view my demo on jsfiddle
.img{
float: left;
background-repeat:no-repeat;
background-size:100% 100%;
border-radius: 4px;
width: 200px;
height: 51px;
background: red;
overflow: hidden;
}
.img_overlay{
width: 100%;
height: 100%;
background: #222;
color: #ddd;
position: relative;
opacity: 0.8;
}
.img_overlay>div{
display: block;
width: 100%;
height: 50%;
text-align: center;
position: relative;
}
.img_overlay .middle{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.img_overlay .separator{
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
<div class="img">
<div class="img_overlay">
<div class="img_show_details">
<div class="middle">details</div>
</div>
<div class="img_open">
<div class="separator"></div>
<div class="middle">open</div>
</div>
</div>
</div>
All I did was taking off :
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
}
This following fix works okay in firefox and chrome but mess in IE.
I fixed height in div, top in middle and top in separator
.img_overlay>div {
display: block;
width: 100%;
height: 40%;
text-align: center;
position: relative;
}
.img_overlay .middle {
position: relative;
top: 60%;
transform: translateY(-50%);
}
.img_overlay .separator {
position: relative;
top: 5px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
here's the demo in jsfiddle.
div #introbox is not centering. I have used container as relative and introbox as absolute. I have set top,bottom,left and right as 0. Still box is not centring. I want to centre the introbox in the intropic.
html,body{
padding: 0;
margin:0;
}
.container{
width: 960px;
margin:0 auto;
position: relative;
}
#header{
width: 100%;
height: 120px;
border-bottom: 1px solid black;
}
#nav{
height: 55px;
border-bottom: 4px solid lightblue ;
}
#intro-pic{
height: calc(100vh - 181px);
width: 100%;
background: url("img/introbg.jpg") center fixed;
}
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left:0px;
}
<div id="header">
<div class="container">
Header
</div>
</div>
<div id="nav">
<div class="container">
Nav
</div>
</div>
<div id="intro-pic">
<div class="container">
<div id="intro-box">
sdfdsfds
</div>
</div>
</div>
Using transform:translate will work for any size div.
html,
body {
padding: 0;
margin: 0;
height:100%;
}
.container {
width: 960px;
margin: 0 auto;
position: relative;
height:100vh;
}
#intro-box {
height: 55vh;
width: 800px;
background: rgba(0, 0, 0, 0.74);
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* vertical centering */
}
<div id="intro-pic">
<div class="container">
<div id="intro-box">
sdfdsfds
</div>
</div>
</div>
Find the below code.
Make left position 50% and give margin-left half of the wrapper width value.
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 0px;
bottom: 0px;
left:50%;
margin-left: -400px; /* Half of the wrapper width */
}
Try below example if you are trying exact center (from top & left)
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px; /* Half of the wrapper width */
margin-top: -27.5vh; /* Half of the wrapper height*/
}
JSFIDDLE DEMO
#intro-box {
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -27.5vh;
}
But again, .container should have height over or equal to #intro-box
There are many ways to center Elements:
using line-height:
you want to center text and you know the size of the box:
.box { background: red; height: 200px; }
.box span { display:block; text-align: center; line-height: 200px; }
<div class="box">
<span>Text</span>
</div>
using transform:
you want to center anything but dont know the size of your box:
.box, .box2 { background: red; height: 200px; }
.box span { top: 50%; text-align: center; position: relative; display: block; transform: translateY(-50%) }
.box2 span { top: 50%; left: 50%; position: relative; display: inline-block; transform: translate(-50%, -50%) }
<div class="box">
<span>Text</span>
</div>
OR WITHOUT TEXT-ALIGN:
<div class="box2">
<span>Text</span>
</div>
using absolute position:
you know the height of the element you want to center
.box, .box2 { background: red; height: 200px; position: relative; width: 100%; }
.box span { position: absolute; background: green; height: 50px; width: 50px; top: 50%; left: 50%; margin: -25px 0 0 -25px; }
<div class="box">
<span></span>
</div>
There are even more ways to manage this.