I want to put the div.father at the center of the screen,and to put the div.son at the center of the div.father.
Here is what i wanted.
How to rewrite my css code to get the result?
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" charset="utf-8">
<title> boxes</title>
<style type="text/css">
div.father{margin: 0 auto;width:300px;height:300px;border:1px solid black;}
div.son{margin: 0 auto;width:100px;height:100px;border:1px solid black;}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
You can use flexbox. Add to parent div display: flex and justify-content: center(for horizontal align) with align-items: center(for vertical align):
div.father {
margin: 0 auto;
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;/*add this*/
justify-content: center;/*add this for horizontal align*/
align-items: center;/*add this for vertical*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.son {
margin: 0 auto;
width: 100px;
height: 100px;
border: 1px solid black;
}
<div class="father">
<div class="son"></div>
</div>
Edit: For horizontal and vertical align in the middle of the screen you can use the trick described to this article Centering Percentage Width/Height Elements.
References
flex
Following css will make center both div.
display:flex and position:absolute will do the trick.
align-items: center; will center child div vertically and justify-content: center; will horizontally inside parent.
div.father {
align-items: center;
border: 1px solid black;
display: flex;
height: 300px;
justify-content: center;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
}
div.son {
border: 1px solid black;
height: 100px;
width: 100px;
}
<div class="father">
<div class="son"></div>
</div>
Working Fiddle
You could do this:
div.father {
margin: 0 auto;
width:300px;
height:300px;
border:1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.son {
margin: 0 auto;
width:100px;
height:100px;
border:1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="father">
<div class="son"></div>
</div>
position: absolute will be place son and father out of flow. With top and left you will place item to the offset you want from the first parent with a position absolute/relative/fixed or <body> and transform: translate(-50% -50%) will re-center element not from top-left corner but center.
NOTE: you could use the -moz-, -o-, -webkit- and -ms- prefix before transform for old version browser.
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
You could also use flex to reach the same goal but if you want support all IE familly, use a polyfil for flex.
Try this one......
html,body{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
display: flex;
align-items: center;
}
.parent{
border:1px solid;
width: 400px;
height: 400px;
margin: 0 auto;
display: flex;
align-items: center;
}
.child{
border:1px solid;
width: 200px;
height: 200px;
margin: 0 auto;
}
<div class="parent">
<div class="child"></div>
</div>
Add this property in div.father class
div.father{position:relative;}
Add this property in div.son class
div.son{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height:100px;
width:100px;
margin: auto;
}
This will work cross browser
Related
I do not understand why the border around body is not rendering. I believe it has to do with the child div, #pages, having absolute positioning because when I remove #pages the border reappears. How do I fix this?
html {
width: 100%;
}
body {
background-color: green;
background-size: 10%;
width: 100%;
margin: 0;
border-style: solid;
}
#pages {
width: 90%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="pages">
REPORT FRAUD<br>
TRACK
</div>
The border does not disappear. It's there but you have no content in the body so it doesn't have what to 'wrap' inside the border. So it appears only like a 'border-top' but in fact is a 4 sided border without any space inside it's borders :)
I say that body has no content because the only element inside it has postion:absolute so the #page doesn't occupy any content.
THere are a few ways to fix this. You can add a height to body of 100vh ( 100% viewport height ). And you will have no problems.
body {
background-color: green;
width: 100%;
margin: 0;
border-style: solid;
box-sizing:border-box;
height:100vh;
}
#pages {
width: 100%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="pages">
REPORT FRAUD<br>
TRACK
</div>
try to add 100% to html and body tag
html, body { height: 100%}
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
background-color: green;
background-size: 10%;
width: 100%;
margin: 0;
border-style: solid;
}
#pages {
width: 90%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="pages">
REPORT FRAUD<br>
TRACK
</div>
I am stack with a css issue.
I would like my picture center in a div (the red one) with a size 50% of the div and also perfectly round...
here is my html code :
<ion-content class="masters">
<ion-row>
<div class="profil-img">
<img src="../../assets/img/tennis-club.jpeg" alt="">
</div>
</ion-row>
</ion-content>
here is my css code :
.profil-img img{
border-radius: 50%;
border: 3px solid white;
// position:absolute;
max-width: 50%;
max-height: 50%;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
.profil-img{
border: 2px solid black;
}
and here the result :
Thank you for the help!
I've tried out many things and now i got a solution.Could this solve your Problem?
.red {
position: relative;
width: 250px;
height: 250px;
background-color: #f00;
border: 2px solid #000;
}
.profil-img {
position: relative;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translateY(calc(-50% - 3px)) translateX(calc(-50% - 3px));
border: 3px solid #fff;
overflow: hidden;
}
.profil-img > img {
display: block;
position: absolute;
width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%) translateX(-50%);
}
<div class="red">
<div class="profil-img">
<img src="https://cdn.transportbox-katzen.de/wp-content/uploads/2016/03/katze-gewohnheitstier.jpg" alt="">
</div>
</div>
For perfectly round image, you have to specify the same width and height for the image.
.profil-img img{
border-radius: 50%;
border: 3px solid white;
display: inline-block;
height:200px;
width: 200px;
margin: 0 auto;
vertical-align: middle;
}
If you want the image to be centered vertically and horizontally, you may try the following:
.profil-img img{
border-radius: 50%;
border: 3px solid white;
display: inline-block;
position:relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height:200px;
width: 200px;
}
Please let me know if it worked for you.
I want to make the element which has id "all" centered on the overall website. Is there something wrong in my code? It does not work properly
#all{
position: absolute;
width: 55%;
margin: 0 auto;
top: 150px;
display: flex;
justify-content: center;
align-items: center;
background-color: #EEEEEE;
box-shadow: 5px 5px 5px #808080;
}
Use left: 50%; transform: translateX(-50%); to center an absolutely positioned element horizontally.
#all{
position: absolute;
width: 55%;
top: 150px;
display: flex;
justify-content: center;
align-items: center;
background-color: #EEEEEE;
box-shadow: 5px 5px 5px #808080;
left: 50%;
transform: translateX(-50%);
}
<div id="all">all</div>
Try to code like below
#all{
position: absolute;
width: 55%;
top: 150px;
left: 50%;
margin-left:-27.5%;
background-color: #EEEEEE;
box-shadow: 5px 5px 5px #808080;
}
I would use it with 2d translate to vertical align it in all screen sizes, as this:
.myClass {
position:fixed;
width: 55%; // or what ever fixed or precentage value
top: 50%;
left: 50%;
// height: 150px; // if height is known
// margin-top: -75px; // if height is known - minus half the height
transform: translate(-50%, -50%); // if height is unknown
}
I want an image to be on the right side of a <div> but centered vertically.
I would like it to be flexbox or as simple as possible.
#container1 {
width: auto;
height: auto;
}
#div1 {
width: 400px;
height: 200px;
border: 1px solid black;
text-align: right;
display: flex;
align-items: center;
justify-content: center;
}
#some_image {
width: 50px;
height: 25px;
}
<div id="container1">
<div id="div1"><img id="some_image" src="some_image.gif"></div>
You were close
Flexbox Solution
#div1 {
width: 400px;
height: 200px;
margin: 1em auto;
border: 1px solid black;
display: flex;
align-items: center; /* vertical center */
justify-content: flex-end; /* far right */
}
#some_image {
width: 50px;
height: 25px;
}
<div id="div1">
<img id="some_image" src="http://lorempixel.com/image_output/abstract-q-c-50-25-6.jpg">
</div>
The best and simplest way (compatible with all browsers) it's to use transform: translate() function combined with position: absolute. It allows to center (horizontally and/or vertically) without pre-known the size of the box, for example:
#container1 {
position: relative;
width: 100%;
background: blue;
height: 100px;
margin: 20px 0;
}
#div1 {
position: absolute;
right: 20px;
top: 50%;
-webkit-transform: translateY(-50%); /* safari ios*/
-ms-transform: translateY(-50%); /* old IE */
transform: translateY(-50%); /* standard */
background:red;
color:white;
}
#div2 {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%); /* safari ios*/
-ms-transform: translate(-50%,-50%); /* old IE */
transform: translate(-50%,-50%); /* standard */
background:red;
color:white;
}
<div id="container1">
<div id="div1">Something you want</div>
</div>
<div id="container1">
<div id="div2">Something you want</div>
</div>
If this is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav id="you">
Gmail
Apps
You
Sign In
</nav>
<form>
<img src="static/Google-logo-520x245.jpg" width="250" height="125" alt="Google Logo">
<br>
<input type="text" name="search">
<button id="left" name="Google">Google Search</button>
<button id="right" name="Feeling">Feeling Lucky</button>
</form>
</body>
</html>
Then why doesn't the justify-content: space-around option put space between my 2 buttons instead they overlay.
I am trying to keep the image, input field and buttons all aligned to the center vertically and each on their own row horizontally.
my css
#you {
position: fixed;
right: 5px;
height: 40px;
top: 0;
padding-top: 15px;
}
#you a {
text-decoration: none;
margin-right: 6px;
}
input {
width: 400px;
/*display: block; */
position: fixed;
top: 100%;
left: 50%;
border: 1px solid #999;
height: 25px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
form {
position: fixed;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ */
}
button {
position: absolute;
top: 135%;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
i rewrote your css.
form{
text-align: center;
margin-top: 100px;
}
img{
display: block;
width: 250px;
margin: 0 auto 20px auto;
}
input{
margin-bottom: 20px;
}
Please take notice of the centering techniques i have used:
text-align: center - Highly effective for inline displayed elements.
fixed width + margin: 0 auto - Effective when you have a block element.
You should add display:flex property to the parent, and justify-content: space-around; property too for getting space around its children.
form {
position: fixed;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ */
display:flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
button {
position: absolute;
top: 135%;
}
Hope helps!
By wrapping your elements with a div.wrapper and by removing the fixed position from your elements it should work.
Have a look at this updated fiddle:
http://jsfiddle.net/nj0mgwdr/4/
The .wrapper div css
.wrapper{
margin: 0 auto;
width: 300px;
text-align: center;
}