I have 3 images and want the one in the middle to be centered, was thinking about making absolute the image inside a relative div and apply percentages, left 50% and i thought i'll be in the middle but is more to the right As you can see at 50% is doesn't look centered
And when i apply 100% is goes outside the screen
Can it be done with percentages? Tried to put some margins but didn't work.
h1 {
display: block;
background-color: yellow;
text-align: center;
}
.objectfitt {
position: relative;
}
.objectfitt img {
width: 300px;
height: 500px;
margin-top: 50px;
display: flex;
display: inline-block;
}
.objectfitt .cov {
height: 300px;
width: 300px;
object-fit: cover;
border: 3px solid red;
}
.objectfitt .cont {
height: 300px;
width: 300px;
object-fit: contain;
border: 3px solid aqua;
position: absolute;
left: 100%;
}
.objectfitt .fill {
object-fit: fill;
border: 3px solid yellow;
height: 300px;
width: 300px;
float: right;
}
<h1>Text</h1>
<div class="objectfitt">
<img class="cov" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
<img class="cont" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
<img class="fill" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
</div>
Just use flexbox on objectfitt, not the images, and set the justify-content property to space-between:
h1 {
display: block;
background-color: yellow;
text-align: center;
}
.objectfitt {
display: flex;
justify-content: space-between;
}
.objectfitt img {
width: 300px;
height: 500px;
margin-top: 50px;
}
.objectfitt .cov {
height: 300px;
width: 300px;
border: 3px solid red;
}
.objectfitt .cont {
height: 300px;
width: 300px;
object-fit: contain;
border: 3px solid aqua;
left: 100%;
}
.objectfitt .fill {
object-fit: fill;
border: 3px solid yellow;
height: 300px;
width: 300px;
float: right;
}
<h1>Text</h1>
<div class="objectfitt">
<img class="cov" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
<img class="cont" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
<img class="fill" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
</div>
I hope I understood correctly.
You have 3 images and you want them centered. is it correct?
h1 {
display: block;
background-color: yellow;
text-align: center;
}
.objectfitt {
float:left;
width:100%;
position: relative;
display: flex;
align-items: center;
align-content: stretch;
justify-content: space-evenly;
flex-direction: row;
flex-wrap: nowrap;
}
.objectfitt .cov {
height: 300px;
width: 300px;
object-fit: cover;
border: 3px solid red;
}
.objectfitt .cont {
height: 300px;
width: 300px;
object-fit: contain;
border: 3px solid aqua;
left: 100%;
}
.objectfitt .fill {
object-fit: fill;
border: 3px solid yellow;
height: 300px;
width: 300px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>ObjectFit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Text</h1>
<div class="objectfitt">
<img class="cov" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
<img class="cont" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
<img class="fill" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
</div>
</body>
</html>
Related
I want to have the ability to move the .secDiv down when resizing the browser. Currently the coloured squares in the .boxes overlap the .secDiv when scaling the browser down.
Please assist.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.boxes {
position: relative;
width: 100%;
height: 300px;
border: 2px solid pink;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
.secDiv {
position: relative;
width: 100%;
height: 300px;
border: 2px solid yellow;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red2 {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green2 {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue2 {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
<div class="boxes">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
<div class="secDiv">
<div class="red2"></div>
<div class="green2"></div>
<div class="blue2"></div>
</div>
I would suggest using dynamic heights such as % or vh. Because you have a fixed height of 300px. It will try to keep that height when resizing, and simply your content doesn't fit in a 300px height when you resize. You can use something simple like overflow-y: scroll if you want to use a fixed height, but I don't think that is what you're going for. I added width: 50% on your boxes and secDiv classes. You can use either 50%, 25% or whatever you desire for your end result. But I would stay away from using fixed units when looking for a responsive design.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.boxes {
position: relative;
width: 100%;
height: 50%;
border: 2px solid pink;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
.secDiv {
position: relative;
width: 100%;
height: 50%;
border: 2px solid yellow;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red2 {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green2 {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue2 {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
<div class="boxes">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
<div class="secDiv">
<div class="red2"></div>
<div class="green2"></div>
<div class="blue2"></div>
</div>
I've added the #media query, so it changes responsively when the browser resizes, and the <div>'s break nicely under each other.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
}
.boxes {
position: relative;
width: 100%;
height: 300px;
border: 2px solid pink;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
.secDiv {
position: relative;
width: 100%;
height: 300px;
border: 2px solid yellow;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red2 {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green2 {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue2 {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
#media(max-width: 994px) {
.secDiv, .boxes {
height: 600px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="boxes">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
<div class="secDiv">
<div class="red2"></div>
<div class="green2"></div>
<div class="blue2"></div>
</div>
</body>
</html>
I have a div filled with a an image contained within another div spanning the top and bellow it a p, I would like it so that the image portion('child') spans to the max-height available without pushing the text out of the div, is this possible?
example code:
Html:
<div className='parent'>
<div className='child'>
<img/>
<p></p>
</div>
</div>
Sass:
.parent{
position: absolute;
width: 85%;
height: 85%;
background: white;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.2);
margin-left: auto;
margin-right: auto;
margin-top: 20%;
left: 0;
right: 0;
text-align: center;
border-radius: 7px;
overflow: hidden;
background: #7510f7;
.child{
display: flex;
width: 100%;
background: #141c3a;
height: 40vh;
overflow: hidden;
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: cover;
background-repeat: no-repeat;
margin: auto;
}
}
p{
text-align: left;
width: 95%;
margin: auto;
font-size: 0.9rem;
}
}
Currently as your child div has display: flex;, the img and p elements will be side-by side.
Adding flex-direction: column; to the child element might be what you want, see the below snippet (added border colours to tell elements apart)
.parent {
width: 85%;
height: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 20%;
text-align: center;
background: #7510f7;
border: red 1px solid;
}
.child {
display: flex;
width: 100%;
background: #141c3a;
height: 40vh;
border: orange 1px solid;
flex-direction: column;
}
img {
width: auto;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
margin: auto;
border: green 1px solid;
}
p {
text-align: left;
width: 95%;
margin: auto;
border: blue 1px solid;
}
<div class='parent'>
<div class='child'>
<img/>
<p>Lorem ipsum</p>
</div>
</div>
Update
Given your sandbox, here are the styles you need to add to get it how you want:
.Cards {
display: flex;
flex-direction: column;
.carousel-root{
flex:1;
}
.carousel, .slider-wrapper, .slider {
height: 100%;
}
.slide{
display: flex;
justify-content: center;
}
}
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 3 years ago.
I need to place a search bar on the bottom left box of the page and it has to take full width with height of 40px. However, when I set a padding to the input to avoid the placeholder to be too close to the border, the search box doesn't respect the width of the parent box and occupies space out of it.
Codepen: https://codepen.io/gabrielmlinassi/pen/gObJQQQ?editors=1100
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.box {
height: 100%;
width: 100%;
}
.box .top {
height: 30%;
width: 100%;
background-color: #cccccc;
}
.box .bottom {
background-color: #ffffff;
height: 70%;
width: 100%;
display: flex;
justify-content: space-between;
}
.box .bottom .left {
background-color: #f7f7f7;
border: solid 1px #cccccc;
border-radius: 8px;
margin-top: -100px;
margin-left: 50px;
width: 59.5%;
height: 100%;
}
.box .bottom .right {
background-color: #f7f7f7;
border: solid 1px #cccccc;
border-radius: 8px;
margin-top: -100px;
margin-left: 15px;
margin-right: 50px;
width: 40%;
height: 100%;
}
.box .bottom .left .search-wrap {
display: flex;
width: 100%;
height: 40px;
}
.box .bottom .left .search-wrap .search-box {
width: 100%;
height: 100%;
margin: 15px;
}
.box .bottom .left .search-box input {
width: 100%;
height: 100%;
padding: 0 15px;
}
<div class="box">
<div class="top"></div>
<div class="bottom">
<div class="left">
<div class="search-wrap">
<div class="search-box">
<input type="text" placeholder="searh" />
</div>
</div>
</div>
<div class="right"></div>
</div>
</div>
How do I solve it?
Add box-sizing: border-box; to include the padding in the 100% width.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.box {
height: 100%;
width: 100%;
}
.box .top {
height: 30%;
width: 100%;
background-color: #cccccc;
}
.box .bottom {
background-color: #ffffff;
height: 70%;
width: 100%;
display: flex;
justify-content: space-between;
}
.box .bottom .left {
background-color: #f7f7f7;
border: solid 1px #cccccc;
border-radius: 8px;
margin-top: -100px;
margin-left: 50px;
width: 59.5%;
height: 100%;
}
.box .bottom .right {
background-color: #f7f7f7;
border: solid 1px #cccccc;
border-radius: 8px;
margin-top: -100px;
margin-left: 15px;
margin-right: 50px;
width: 40%;
height: 100%;
}
.box .bottom .left .search-wrap {
display: flex;
width: 100%;
height: 40px;
}
.box .bottom .left .search-wrap .search-box {
width: 100%;
height: 100%;
margin: 15px;
}
.box .bottom .left .search-box input {
width: 100%;
height: 100%;
padding: 0 15px;
box-sizing: border-box;
}
<div class="box">
<div class="top"></div>
<div class="bottom">
<div class="left">
<div class="search-wrap">
<div class="search-box">
<input type="text" placeholder="searh" />
</div>
</div>
</div>
<div class="right"></div>
</div>
</div>
Note: In most cases, it's useful to include a general rule for all elements with this setting, like this:
* {
box-sizing: border-box;
}
Newbie question here. Trying to learn the basics. I have a simple page with a header a footer and a container. In that container I want an image, and I want it centered. Using margin: 0 auto is not doing it. I have tried explicitly giving the container a width, still no good. Thanks.
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: absolute;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
margin: 0 auto;
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
jsfiddle
remove position: absolute; and add width to imagewrap class .like width: 300px;
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
width: 300px;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
margin: 0 auto;
}
<div id="header">
</div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer">
</div>
You can add text-align: center; instead of margin: 0 auto; to imagewrap
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
display: block;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: absolute;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
width: 100%;
text-align: center;
}
<div id="header">
</div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer">
</div>
Try background image for that container and position it center.
Please change background url as per your requirement
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
background-image: url(http://clockworkmoggy.com/wp-content/uploads/image00.png);
background-repeat: no-repeat;
background-position: center;
}
#imagewrap{
position: absolute;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
margin: 0 auto;
}
<div id="header">
</div>
<div id="container">
<div id="imagewrap">
</div>
</div>
<div id="footer">
</div>
Just remove margin:0 auto; and replace text-align: center; in #imagewrap. It will work!!
Check the below JSFiddle code for reference.
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
text-align: center;
}
<body>
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/29708" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
</body>
JSFiddle Demo
I have a page where I'm displaying the status of two websites -- as in if they're currently up and running, or not. If the site is up, I want the block to have a light green background, and if not, a light red one. And the site's name should be centered inside the block.
This is what I've tried so far:
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#smallcontainer {
width: 208px;
height: 100px;
margin: 200px auto auto;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
}
<div id="container">
<div id="smallcontainer">
<div class="status"></div>
<div class="status"></div>
</div>
</div>
It works (see full screen output), but I feel like I'm way off. How do I do something simple as this using CSS, the correct way? I feel like my code is a hack. And how would you write the text exactly in the center of the block, vertically and horizontally?
And is it possible to have it such a way that it works across all desktop screen sizes? Maybe I should specify width and height in percentage as opposed to pixels?
You can use flexbox. support
HTML
<div id="container">
<div class="status"></div>
<div class="status"></div>
</div>
CSS
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
margin-left: 2px;
border: 1px solid #ccc;
}
http://jsfiddle.net/b9n3h1en/
Try this Fiddle, aligned text vertically and horizontally in center of the div.
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#smallcontainer {
width: 208px;
height: 100px;
text-align: center;
margin: 200px auto auto;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
line-height: 100px;
}
Try this jsfiddle
body {
font-family: sans-serif;
}
#container {
width: 100%;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
position:relative;
}
#smallcontainer {
width: 208px;
height: 100px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: vertical;
box-pack: center;
box-align: center;
text-align:center;
}
Also see more about "display:flexbox"
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Here's how I'd do it:
HTML:
<div id="container">
<div id="smallcontainer">
<div class="status">
<div class="border">
<div class="txt">Text Here</div>
</div>
</div>
<div class="status">
<div class="border">
<div class="txt">More Text Here</div>
</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
#container {
width: 95%;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
position: relative;
}
#smallcontainer {
width: 208px;
height: 100px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.status {
height: 100%;
width: 50%;
float: left;
text-align: center;
padding: 2px;
}
.border {
background: #efefef;
border: 1px solid #ccc;
width: 100%;
height: 100%;
position: relative;
}
.txt {
position: relative;
top: 50%;
transform: translateY(-50%);
}
See the fiddle here: http://jsfiddle.net/bootsified/kf7Lbq24/
You can add negative margins to each of the divs you want to put exactly in the center. Note that for this the width and height should be in pixels.
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
border: 1px solid #ccc;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}
#smallcontainer {
width: 208px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -104px;
margin-top: -50px;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
}
<div id="container">
<div id="smallcontainer">
<div class="status"></div>
<div class="status"></div>
</div>
</div>