i want to make a div in the center of the page and that div contains a button which should be in the center of that div.
Like a div should be in the middle of a html page and then that div should contain a button which is also in the middle of that div.
Check this, hope it would help
.main{
height:400px;
background-color:#000;
width:100%;
position:relative;
}
.child{
height:100px;
position:absolute;
background-color:#fff;
width:100px;
}
.button{
height:25px;
position:absolute;
background-color:red;
width:25px;
}
.center{
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
<div class="main">
<div class="child center">
<div class="button center"></div>
</div>
</div>
Try using following code
HTML
<div class="parent">
<button class="button">Button</button>
</div>
CSS
body {
position:relative;
}
.parent {
position:absolute;
width:200px;
height:200px;
background:red;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.button {
padding: 10px 20px;
background-color: grey;
color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
Here is the simple and less code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<style>
#buttonWithDiv {
position: fixed;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
border-bottom-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-style: solid;
border-color: #000000;
text-align: center;
}
button {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="buttonWithDiv">
<button type="submit">Click here to Start Test</button>
</div>
</body>
</html>
Using flexboxes
.main {
height: 400px;
background-color: black;
width: 100%;
}
.child {
height: 100px;
width: 100px;
background-color: red;
}
.main,
.child {
display: flex;
justify-content: center;
align-items: center;
}
<div class="main">
<div class="child">
<button>Button</button>
</div>
</div>
Related
I want to make a div like this
I used two <div> that contain two <h2> and must replace the top and bottom of the parent <div>.
Here is my code :
.parent {
background: #eae8db;
margin: 20px;
border: 1px solid black;
position: relative;
height: 300px;
}
.top {
background-color:#d6d1b1;
height: 15%;
width: 100%;
position: absolute;
top: -06%;
left: -03.7%;
line-height:100px;
vertical-align:middle;
}
h2{ text-align: center;}
.center {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.bottom{
background-color:#24bfd1;
height: 5%;
width: 100%;
position: absolute;
bottom : 60%;
left: -03.7%;
line-height:100px;
vertical-align:middle;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent" >
<div class="top">
<h2>E-book</h2>
</div>
<img class="center" src="https://picsum.photos/200">
<div class="bottom">
<h2>Voir</h2>
</div>
</div>
</body>
</html>
Link to JsFiddle
Someone can help me to adapt it please ?
I just made some changes in your CSS, replace it should help :
.parent {
background: #eae8db;
border: 1px solid black;
display: flex;
align-items:center;
justify-content:center;
height: 300px;
position:relative;
}
.top {
background-color:#d6d1b1;
height: 15%;
width: 100%;
position:absolute;
top:0;
display:flex;
justify-content:center;
align-items:center;
}
.bottom{
background-color:#24bfd1;
height: 12%;
width: 100%;
position: absolute;
bottom:0;
display:flex;
align-items:center;
justify-content:center;
}
I created a fiddle based on your DOM:
https://jsfiddle.net/xy0zqsnt/1/
I also tried to reuse your css classes, but I threw out some stuff, which didn't make sense to me. There is still room for improvement, but I hope you are able to recognize the changes in the css.
The main point is the use of display:flex in the .parent css class. Flexbox helps a lot for layout tasks like this, make sure to check it out (e.g.: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - but there are many resources out there!)
HTML
<div class="parent" >
<div class="top">
<h2>E-book</h2>
</div>
<img class="image" src="https://picsum.photos/200">
<div class="bottom">
<h2>Voir</h2>
</div>
</div>
CSS
h2{ text-align: center;}
.parent {
background: #eae8db;
margin: 20px;
height: 300px;
display: flex;
flex-direction: column;
align-items: center;
}
.top {
background-color:#d6d1b1;
width: 100%;
}
.bottom{
background-color:#24bfd1;
width: 100%;
}
.image{
margin: 1em;
}
Solution: ->
No need to use absolute position for this layout...
Here is the solution: ->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent" >
<div class="top">
<h2>E-book</h2>
</div>
<p>
<img class="center" src="https://picsum.photos/200">
</p>
<div class="bottom">
<h2>Voir</h2>
</div>
</div>
</body>
</html>
CSS part->
.parent {
background: #eae8db;
margin: 20px;
}
.top {
background-color:#d6d1b1;
padding: 20px;
}
p{
margin-top: 0;
text-align: center;
padding: 50px 0;
}
h2{ text-align: center;}
.bottom{
background-color:#24bfd1;
padding: 10px;
}
The div inside another div won't go to the right but just stays to the left. The code below is some what look like chat box the first div with green background has a position of 0px left and it works but the second div has 0px right and it still stick to the left please help me with this it bothers me for 2 day without right solution
<html>
<head>
</head>
<body>
<div style="width:100% height:100%; position: relative; top:0px; left:0px; background-color:white;">
<div style="width:200px; height:100px; position: relative; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: relative; top:10px; right:0px; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
</body>
</html>
position: relative means the div is positioned "relative to itself". So right: 0px just means "move the div 0px to the right of where it would normally be"... not to the right edge of the container.
You could use position: relative on the container, and apply position: absolute to the children instead, but assigning top values will be cumbersome.
Info about position
An alternative might be adding display: flex to the wrapper. Then you can use margin-left: auto to push a div to the right.
.wrapper {
background: lightgrey;
display: flex;
flex-direction: column;
}
div > div {
width: 200px;
height: 100px;
margin-bottom: 10px;
}
.left {
background: green;
}
.right {
background: red;
margin-left: auto;
}
<div class="wrapper">
<div class="left">
<p>1</p>
</div>
<div class="right">
<p>2</p>
</div>
</div>
.parent{
width:100%;
position: relative;
clear: both;
}
.incoming {
float: left;
max-width: 80%;
background-color: #ccc;
padding: 4px;
overflow: auto;
}
.reply {
float: right;
max-width: 80%;
background-color: powderblue;
padding: 4px;
}
<div class="parent">
<div class="incoming"><p>Incoming chat that takes up a maximum of 80%
of screen width.</p></div>
<div class="reply"><p>Reply, that also does the same, but from the right of the screen.</p></div>
</div>
Edited to reflect updated requirement
Using relative element with top, left, bottom and right properties is useless. you have to change it to absolute value.
<div style="width:100% height:100%; position: relative; background-color:white;">
<div style="width:200px; height:100px; position: absolute; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: absolute; top:10px; right:0px; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
UPDATE
here is another way to position elements
<div style="width:100%; height:100px; background-color:white;">
<div style="width:200px; height:100px; float:left; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; float:right; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
UPDATE#2
here is markup for your chat
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.chat {
width: 100%;
background: lightblue;
padding: 10px;
overflow: hidden;
}
.message {
clear: both;
font-family: sans-serif;
color: white;
}
.to, .from {
width: 40%;
padding: 10px;
overflow: hidden;
}
.to {
background: pink;
float: left;
}
.from {
background: lightgreen;
float: right;
}
<div class="chat">
<div class="message">
<div class="to">hi</div>
</div>
<div class="message">
<div class="to">how are u?</div>
</div>
<div class="message">
<div class="from">fine, thnks</div>
</div>
<div class="message">
<div class="to">can u help me?</div>
</div>
<div class="message">
<div class="from">sure, no problem</div>
</div>
</div>
Use float: right; instead of right:0px;.
Here is the code.
<html>
<head>
</head>
<body>
<div style="width:100% height:100%; position: relative; top:0px; left:0px; background-color:white;">
<div style="width:200px; height:100px; position: relative; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: relative; top:10px; float:right; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
</body>
</html>
Hi I haven't got the right concept about center div in nested divs.Here is my html .I want to center white background div.
<div class="div1">
<div class="img"></div>
</div>
<div class="div2">
</div>
and CSS
.div1{
width :100%;
height: 300px;
background-color: black;
position: relative;
}
.img{
width: 100px;
height: 100px;
position: absolute;
background-color : white;
display: block;
margin: auto;
bottom: 0%;
margin-bottom: -50px;
text-align: center;
}
.div2{
width :100%;
height: 300px;
background-color: #e65100;
}
I tried to center div using text-align:center but it was not working.
and the output is here
.img {
...
left: 0;
right: 0;
}
fiddle: https://jsfiddle.net/ep9co5g5/
You can use left and translateX to center it since you are using position absolute,
you need to add this css to .img
left:50%;
transform:translateX(-50%);
see code snippet:
.div1{
width :100%;
height: 300px;
background-color: black;
position: relative;
}
.img{
width: 100px;
height: 100px;
position: absolute;
background-color : white;
bottom: 0%;
margin-bottom: -50px;
left:50%;
transform:translateX(-50%);
}
.div2{
width :100%;
height: 300px;
background-color: #e65100;
}
<div class="div1">
<div class="img"></div>
</div>
<div class="div2">
</div>
.div1{
width :100%;
height: 300px;
background-color: black;
position: relative;
}
.img{
width: 100px;
height: 100px;
position: absolute;
background-color : white;
display: block;
margin: auto;
bottom: 0%;
margin-bottom: -50px;
text-align: center;
left:0;
right:0;
}
.div2{
width :100%;
height: 300px;
background-color: #e65100;
}
<div class="div1">
<div class="img"></div>
</div>
<div class="div2">
</div>
I have this sample:
link
CODE HTML:
<div class="container">
<div class="image-container">
<img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
</div>
<div class="desc">
details
</div>
</div>
CODE CSS:
body{
background:black;
}
.container{
background:#f3f4f6;
border-bottom:5px solid #db5207;
}
.image-container,.desc{
display:inline-block;
vertical-align:top;
}
.desc{
background:red;
}
img{
width:612px;
height:412px;
border:10px solid white
}
I put an image to better understand what they want to do
basically I want the image to be over container and divul "desc" to be by end.
You can help me solve this problem? What is the best way to do this?
Thank you in advance!
Try this here code it may be solve your problem
*{margin:0;padding:0;}
.container{margin:100px 0;height:200px;border:5px solid red;position:relative;}
.image-container{height:300px;width:30%;border:5px solid blue;position:absolute;right:55%;top:-30%;}
.image-container img{height:300px;width:100%;}
.desc-container{height:190px;width:50%;border:5px solid green;float:right;}
<div class="container">
<div class="image-container">
<img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
</div>
<div class="desc-container">
details
</div>
</div>
Check the following code for your answer. Also you can verify the codepen https://codepen.io/sasikumarhx/pen/VKmQod
HTML:
<div class="container">
<div class="left">
<div class="image-container">
<img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
</div>
</div>
<div class="right">
<div class="desc">
details
</div>
</div>
</div>
CSS:
body{
background:black;
}
.container{
background:#f3f4f6;
border:5px solid #db5207;
height:250px;
}
.right{
float:right;
width:49%;
}
.left{
float:left;
width:49%;
}
.image-container{
}
.desc{
background:red;
}
img{
width:50%;
height:130%;
border:10px solid white;
float:right;
}
please check below code:
just need to change in css:
body{
background:black;
}
.container{
background:#f3f4f6;
border-bottom:5px solid #db5207;
margin-top: 50px;
height: 380px
}
.image-container,.desc{
display:inline-block;
vertical-align:top;
}
.desc{
background:red;
min-height: 380px;
display: inline-block;
}
img{
width:612px;
height:412px;
border:10px solid white;
position: relative;
top:-20px;
}
Please check the following if it satisfies your requirement:
<!DOCTYPE html>
<html>
<head>
<title>Solution</title>
<style type="text/css">
#container {
background-color: #DCDCDC;
position: relative;
left: 100px;
top: 100px;
width: 800px;
height: 200px;
padding: 5px;
}
#image {
background-color: #F0E68C;
width: 200px;
height: 255px;
position: relative;
left: 150px;
top: -80px;
}
#details {
background-color: #FF7F50;
position: relative;
width: 400px;
left: 380px;
top: -310px;
height: 190px;
}
h2 {
margin-top: 5px;
margin-left: 5px;
}
</style>
</head>
<body>
<div id="container">
<h2>container</h2>
<div id="image">
<h2>image</h2>
</div>
<div id="details">
<h2>details</h2>
</div>
</div>
</body>
</html>
When I set the child div's margin-top property it always overflows and when I set the parent's position as relative and it's position as absolute it goes off to the side in the middle of the page. Child: menu_button_container, Parent: heading.
I want to move it within the parent div how can I accomplish this?
Css:
html, body
{
width:100%;
height:100%;
margin:0px;
}
.heading
{
width:100%;
height:20%;
background-color:green;
}
.content
{
width:100%;
height:80%;
background-color:orange;
}
.menu_button_container
{
display:inline-block;
margin-top:30%;
margin-left:0%;
float:left;
width:20%;
height:40%
}
.menu_button
{
background-color:purple;
border:none;
width:100%;
height:100%;
font: 14px;
color:white;
}
.center_text
{
width:80%;
height:100%;
background-color:blue;
margin-left: 10%
}
Html:
<!DOCTYPE html>
<html>
<head>
<title>template 1</title>
<link rel="stylesheet" type="text/css" href="project.css">
</head>
<body>
<div class="heading">
<div class="menu_button_container" style="margin-left: 10%">
<button class="menu_button">Home</button>
</div>
<div class="menu_button_container">
<button class="menu_button">Link</button>
</div>
<div class="menu_button_container">
<button class="menu_button">Link</button>
</div>
<div class="menu_button_container">
<button class="menu_button">Link</button>
</div>
</div>
<div class="content">
<div class="center_text"></div>
</div>
</body>
</html>
I would appreciate any help in this matter.
I guess that's what you want?
body {
width: 100vw;
height: 100vh;
margin: 0px;
}
.heading {
position: relative;
width: 100%;
height: 20%;
background-color: green;
font-size: 0px;
}
.menu_button_container {
text-align: center;
position: absolute;
width: 80vw;
bottom: 0px;
left: 0;
right: 0;
margin: auto;
}
.content {
width: 100%;
height: 80%;
background-color: orange;
}
.menu_button {
display: inline-block;
background-color: purple;
border: none;
width: 20vw;
font: 14px;
color: white;
}
.center_text {
width: 80%;
height: 100%;
background-color: blue;
margin-left: 10%
}
<div class="heading">
<div class="menu_button_container">
<button class="menu_button">Home</button>
<button class="menu_button">Link</button>
<button class="menu_button">Link</button>
<button class="menu_button">Link</button>
</div>
</div>
<div class="content">
<div class="center_text">
</div>
</div>