I would like to center a <div /> in the <body /> and add additional margin-left and margin-right to it.
Something like that - of course it should work :) https://jsfiddle.net/kweyn912/
Normally, I would use margin: auto, but in this case I want to specifically add additional margin, so I cannot do that.
I tried using transform: translateX(-50%) together with left: 50% and margin-left. That worked until I tried setting margin-right
Side notes:
I have some restrictions: I cannot use padding instead of margin. I cannot use position: absolute and I have to use display: block
Updated your project adding
div {
width: 200px;
height: 100px;
background: lightblue;
margin-left: 20px;
margin-right: 40px;
position: absolute;
left: calc(50% - 110px)
}
body {
width: 100%;
background: white;
text-align: center
}
https://jsfiddle.net/kweyn912/6/
Try adding padding to the body (or parent container) rather than the div with the div centered in the parent element. That should center the div with a gutter on the left/right.
div {
max-width: 400px;
height: 100px;
background: lightblue;
margin: 0 auto;
display: block;
}
body {
background: white;
padding: 0 20px
}
https://jsfiddle.net/y16k52xt/
Instead of using margin: 0 auto and display: block, you can use display: inline-block along with text-align: center on the parent element to center the divs. Then use your margin adjustments to set it off-center. Use white-space: pre to force each item to break to a new line.
body {
width: 100%;
background: white;
text-align: center;
white-space: pre;
}
.div {
margin-left: 20px;
margin-right: 40px;
width: 200px;
height: 100px;
background: lightblue;
display: inline-block;
}
.two {
width: 250px;
margin-left: 30px;
margin-right: 80px;
background: red;
}
<body>
<p>
CENTER
</p>
<div class="div one">
Lorem ipsum
</div>
<div class="div two">
</div>
<div class="div three">
</div>
</div>
</body>
https://jsfiddle.net/kweyn912/12/
Lets say that you want your element to be off center in 20px to the left (Net result of your example of margin-left: 20px and margin-right: 40px;
This is equuivalent to a transform: translateX(-20px);
div {
width: 200px;
height: 100px;
background: lightblue;
margin: auto;
transform: translateX(calc(20px - 40px));
}
<div>
Lorem ipsum
</div>
Related
I have an <img> and I'm giving it a background-color, a padding along with a border-radius.
The problem is that even though I have a padding and so there's a lot of space between the inner image and the edges of the box, the border-radius apparently gets applied to the image inside as well, and therefore causes the edges of the inner image to be cut off. Here's what it looks like:
https://i.stack.imgur.com/tYKfh.png
.element img {
padding: 25px;
border-radius: 50%;
background-color: #6e4fff;
height: 30px;
width: 30px;
}
<div class="element">
<img src="https://i.imgur.com/L8JEkBk.png" />
</div>
Move the styling to the parent element, take out the padding, and center with flexbox:
.valueelement {
border-radius: 50%;
background-color: #6e4fff;
height: 80px;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.valueelement img{
height: 30px;
}
<div class="valueelement">
<img src="https://i.imgur.com/L8JEkBk.png" />
</div>
Another solution:
.valueelement img {
height: 30px;
margin: 0 auto;
display: block;
}
.valueelement {
padding: 25px;
background-color: #6e4fff;
border-radius: 50%;
overflow: hidden;
height: 30px;
width: 30px;
}
<div class="valueelement">
<img src="https://i.imgur.com/L8JEkBk.png" />
</div>
Simply use the calc method when positioning your image in conjunction with display:block and position:absolute. Formula: calc(50% - imageWidth/2), then do the same for the height.
JsFiddle: https://jsfiddle.net/h867qgcL/
.valueelement {
position:relative;
border-radius: 50%;
background-color: #6e4fff;
height: 80px;
min-width:80px;
width:80px;
}
.valueelement img {
position: absolute;
padding:0;
display:block;
margin-left:calc(50% - 13px);
margin-top:calc(50% - 15px);
height:30px;
}
<div class="valueelement">
<img src="https://i.imgur.com/L8JEkBk.png"/>
</div>
How can I make a container element use only the "required" space to wrap inline-block children? See this image below...
You can see how the arrows stretch through the unwanted space. I've spent a few hours already trying to make it work. I even tried a couple nice SO answers such as this one...
Fit div width to inline-block children
but it didn't seem to suit my case scenario because it assumes a fixed number of children per row.
The fiddler below illustrates the problem I'm facing. However, there's one thing to notice, the max-width of the .box is supposed to be set in % rather than px
html,
body {
background-color: #eee;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.container {
display: block;
width: 100%;
}
.box {
display: inline-block;
/*
In the production "max-width" will be set to a percentage value rather than px units
Using pixels here just for illustration purposes
*/
max-width: 380px;
padding: 20px;
margin: 20px;
background-color: #fff;
border: 1px solid #ddd;
}
.img-wrapper {
}
.img-wrapper span {
display: inline-block;
position: relative;
overflow: hidden;
width: 128px;
height: 128px;
border-radius: 10px;
}
.img-wrapper img {
max-width: 196px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<div class="box">
<p>
Lorem ipsum dolor sit amet
</p>
<div class="img-wrapper">
<span>
<img src="https://i.imgur.com/yvMCRsv.jpg" />
</span>
<span>
<img src="https://i.imgur.com/efFdd14.jpg" />
</span>
<span>
<img src="https://i.imgur.com/7Yv987J.jpg" />
</span>
</div>
</div>
</div>
Question
Basically, all I want to achieve is having the parent/container element use only the necessary space when the children are inline-block (floats are welcomed)
Here's a Fiddle, with working solution
What I basically did there was that,
Added float: left; and margin: 0px 5px 5px 0px; in .img-wrapper span{}
Added :nth-of-type() selector for .img-wrapper span{}
code:
.img-wrapper span {
display: inline-block;
position: relative;
overflow: hidden;
width: 128px;
height: 128px;
border-radius: 10px;
float: left;
margin: 0px 5px 5px 0px;
}
.img-wrapper span:nth-of-type(2n + 1){
clear: left;
}
I am developing a website. In my website I am showing two element side by side. Second element will have fixed width and but first element will take the rest of the space. So I wrote a simple HTML and CSS code like this.
html
<div class="gallery-container">
<div class="gallery-left">
</div>
<div class="gallery-right">
</div>
</div>
css
.gallery-left{
padding-top: 0px;
background: red;
display: inline-block;
height: 100%;
margin-top: 0px;
width: calc( 100% - 100px);
}
.gallery-right{
padding-top: 0px;
display: inline-block;
background: yellow;
width: 96px;
height: 100%;
}
.gallery-container{
width: 100%;
height: 300px;
}
It displays like this:
It is working as expected as you can see the red and yellow boxes. But the problem is when I add an child element to HTML like this:
<div class="gallery-container">
<div class="gallery-left">
<h5>This is child element</h5>
</div>
<div class="gallery-right">
</div>
</div>
The whole left box went down like this:
How can I fix it? I set padding top and margin top zero for both boxes. Main parent element as well. But it is not working.
You should add vertical-align: top; to these inline-block elements. Something like that should work:
.gallery-left{
padding-top: 0px;
background: red;
display: inline-block;
height: 100%;
margin-top: 0px;
vertical-align: top;
width: calc( 100% - 100px);
}
.gallery-right{
padding-top: 0px;
display: inline-block;
background: yellow;
vertical-align: top;
width: 96px;
height: 100%;
}
There are two divs. I want the inner div to be vertically centered, without giving margins, as I want height of inner div to be auto, because its content can change and height can increase.
Here are the two divs:
Outer div:
.frontleft{
width: 602px;
height: 450px;
float: left;
margin: 35px auto;
z-index: 10;
}
Inner div:
.c1{
height: auto;
width: inherit;
}
Thanks.
You can use Flexbox. display: flex on parent and align-self: center on the child item will center it vertically.
.frontleft {
width: 602px;
height: 450px;
float: left;
margin: 35px auto;
z-index: 10;
background: #2C2955;
display: flex;
}
.c1 {
height: auto;
width: inherit;
background: #4C5FB1;
align-self: center;
}
<div class="frontleft">
<div class="c1">Center</div>
</div>
Why don't you use a table instead? With vertical-align in td tag.
<html>
<body>
<table class="frontleft">
<tr><td>I am a sentence</td></tr>
</table>
</body>
</html>
You should position inner element absolute and use transform property for vertical centering.
.frontleft {
width: 602px;
height: 450px;
float: left;
margin: 35px auto;
z-index: 10;
position: relative;
background: orange;
}
.c1 {
height: auto;
width: inherit;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: blue;
}
<div class="frontleft">
<div class="c1">test</div>
</div>
Right now Im trying to put an image on the top of a div. The divs are in horizontal, and I don´t know why, but when I put the image its position affects all external divs... I mean, the image should only affect the div in which I put it.
I know this can be a little bit difficult to undestand, I took a capture of my divs: Capture. As you can see, the height of my image affects the external divs.
Here is the HTML code:
<div class="hoteles">
<div class="head-hoteles">Los mejores hoteles</div>
<div class="hotel"><img src="images/hotels/hotel-bellevue.jpg" alt="Hotel Bellevue"></div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
</div>
And the CSS:
.hoteles{
background-color: pink;
height: 100%;
width: 65%;
float: left;
padding-left: 2%;
}
.head-hoteles{
width: 100%;
height: 100px;
background-color: yellow;
padding: 5%;
font-size: 1.5em;
}
.hotel{
height: 12.5em;
min-width: 23%;
display: inline-block;
background-color: brown;
margin-bottom: 2%;
}
.hotel img{
width: 100px;
}
Other question is... when I put "width 100%" its does not do it, I just can resize the image with pixels... Thanks !
You need to float the divs, currently your divs are positioned as inline-block which is causing disorder. Additionally you can use vertical-align: top to order the inline-block.
Working example:
JSFiddle
.hoteles {
background-color: pink;
height: 100%;
width: 65%;
float: left;
padding-left: 2%;
}
.head-hoteles {
width: 100%;
height: 100px;
background-color: yellow;
padding: 5%;
font-size: 1.5em;
}
.hotel {
height: 12.5em;
min-width: 23%;
background-color: brown;
float: left;
margin:2% 5px 2% 0;
}
.hotel img {
width: 100px;
float:left;
}
<div class="hoteles">
<div class="head-hoteles">Los mejores hoteles</div>
<div class="hotel">
<img src="images/hotels/hotel-bellevue.jpg" alt="Hotel Bellevue" />
</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
</div>
As for your second question, you need to have a width for the parent of img. Currently it uses min-width, change it to width and give your img the width of 100% and it will expand to the percentage of the parent. Like the following:
.hotel {
width: 23%;
}
.hotel img {
width: 100%;
}
Try adding the following CSS rule:
.hotel { vertical-align: top; }
You are seeing the result of inline elements being positioned along the baseline.