This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
How to center a "position: absolute" element
(31 answers)
Closed 2 years ago.
im trying to put my image on the middle top off my box. I'm sorry if this is a stupid question but I'm new to coding and I'm young. I searched on the code, everything's fine except this part. It makes my image is on like the middle mid, a bit on the left which is not what I want. Thanks
.profile img
{
position: absolute!important;
left:calc(50% - 60%px)!important;
border: 10px solid #fff!important;
}
this is what it gives me
This will also help;
.profile{
position:relative; /* set whatever height and width to this div */
}
.profile img{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border: 10px solid #fff;
}
Try using Flexbox containers. Using justify-content and align-items, you should be able to put your image at the top center of your div without using absolutes. The W3 links show examples of both properties--combine them and you should achieve your desired result.
Using margin:auto (by making img tag as display:block)
div {background: yellow; height: 400px;}
img {border-radius:50%; margin:auto;display:block;}
<div class="wrapper">
<img src="https://picsum.photos/100" />
</div>
Using Flexbox
div {background: yellow; height: 400px; display: flex; justify-content:center;}
img {height: 100px; border-radius: 50%;}
<div class="wrapper">
<img src="https://picsum.photos/100" />
</div>
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
Is it possible to contain/limit the height of an image in a column flexbox? In this fiddle, I would like to make the image be displayed in a reduced size in order to make the title underneath it be just inside the bottom of the flex parent.
Ideally, I would like to do this with a 100% CSS solution.
Here is the fiddle: https://jsfiddle.net/brandoncc/czLjoxdu/4/
The basic CSS code is:
div {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid green;
width: 400px;
height: 300px;
}
Just add a new class
img
{
height:50%;
}
Change the percentage as you like.
try this..
<div>
<img src="http://placehold.it/350x350" / class="img-fluid">
<p>Image title</p>
div {
border: 1px solid green;
width: 400px;
height: 300px;
position:relative
}
You may add the following to keep the image from overflowing and use the max space. You can change the percentage to smaller the image. Just tweak it an see what works best for you.
img {
height: 100%;
}
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 8 years ago.
I have a div in body:
<div class="wrapper" style="position: fixed">
<img src="#">
</div>
The <img> has its intrinsic width and height (and unknown). So how do I do to center the <div> in srceen (by CSS, not Jquery or Javascript)?
Demo
css
img {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background: #000;
}
I suppose you want the .wrapper to have a fixed position because you want to have it as a header or footer. This makes it wrap to its contents, so you need to explicitly tell it to stretch to 100% width. Next, img are displayed inline. Therefore, to use the auto margin trick, you need to set its display to block:
.wrapper {
position: fixed;
width: 100%;
background: lightblue;
}
img {
display: block;
margin: 0 auto;
}
Working jsfiddle here: http://jsfiddle.net/7swkv/
This question already has answers here:
How to make an image center (vertically & horizontally) inside a bigger div [duplicate]
(36 answers)
Centering image horizontally and vertically [duplicate]
(5 answers)
Closed 9 years ago.
I am trying to horizontally center a large image. Because I am using HTML5, I can't use <center>. I could use left:400px, but that wouldn't work for different screen sizes.
Wrap the image inside an element and use text-align: center;...
Demo
<div class="center">
<img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" alt="Google" />
</div>
.center {
text-align: center;
}
Alternatively if you are aware, that what's the image width, you can also use margin: auto; with display: block; as img tag is inline element by default and of course, the width property
img {
width: 276px;
display: block;
margin: auto;
}
Demo 2
Try this css to horizontally center
display: block;
margin: 0 auto;
= the top and bottom margin 0, and the left and right margin auto
Use CSS text-align: center;. And don't forget to set width on the div or it will look left-aligned.
<div style="text-align: center; width: 100%; border: 1px solid black;">Centered</div>
Depending on your specific situation, this has worked for me on several projects:
<style>
.outer{float: left; position: relative; left: 50%;}
.inner{float: left; position: relative; left: -50%;}
</style>
<div class="outer">
<div class="inner">content you want to center, image, text, whatevs</div>
</div>
The IMG element is inline, by default. So, as the others have pointed, you have two options:
1) Keep it inline, and use text-align: center;.
2) Make it a block element with display: block;, and then use margin: auto;, which works only on block elements. I think this solution is better. Setting the width is just another way to force it to be a block element, but it's less obvious for someone that may read the code later. So explicitly setting the display type to block is better for readability.
If your element has the width property , then give it margin:auto;.
I was under the impression that when using % or auto for margins on a div contained within another div the position would be calculated in respect to the parent div.
So if I have a div with height: 50%, margin-top: 25% and margin-bottom: 25% the box should centre vertically within the parent div.
When I do this though the div centres on the page not the parent div.
The CSS
div#header {
width: 100%;
height: 100px;
margin: 0px;
position: fixed;
}
div#leftnavigation {
height: 50%;
margin-top: 25%;
margin-bottom: 25%;
float: left;
}
And the HTML
<!--Title and navigation bar-->
<div id='header'>
<!--Left navigation container-->
<div id='leftnavigation'>
<p>efwfwgwegwegweg</p>
</div>
</div>
In my case there are other divs floated to the right of the one detailed above, but any one of them behaves the same way. I'm assuming I'm doing something daft but I've been over all the other questions I could find along these lines and still can't figure it out.
EDIT
Here's the JSFiddle as requested http://jsfiddle.net/ChtVv/
UPDATE
I've tried removing the margin constraints and setting the leftnavigation div to height: 100%, this works so the issue is with the margin attribute?
The reason it didn't work is that percentage-margins are percentages of the parent's width, not its height. You can tell this by using margin-top: 25px; margin-bottom: 25px;, and also by increasing the width of the right-panel in jsFiddle.
In all cases % (percentage) is a valid value, but needs to be used
with care; such values are calculated as a proportion of the parent
element’s width, and careless provision of values might have
unintended consequences.
W3 reference
CSS is tricky!! :D
This is a borrowed technique to centre vertically and horizontally, but it would involve changing your HTML and CSS. I am not sure how flexible you are with your code:
CSS:
#outer {width: 100%; border: 3px solid red;}
#middle {width: 100%; text-align: center;border: 3px solid green;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;border: 3px solid blue;}
/* Courtesy: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
HTML
<!--Title and navigation bar-->
<div id='outer'>
<!--Left navigation container-->
<div id='middle'>
<p id="inner">efwfwgwegwegweg</p>
</div>
</div>
You can build upon this to achieve whatever you are after!
fiddle: http://jsfiddle.net/pratik136/ChtVv/2/
Ok, so there are a lot of reasons why this would not work.
The main reason would be that your container has position:fixed;
When adding position:fixed; to a element, it no longer reserved it's space in the DOM and won't contain it's children.
I have made a example of the best way (in my Opinion) to center your child both Vertically & Horizontally
Here is a demo.
Demo
And here is the code.
<div id="container">
<div id="child"></div>
</div>
#container{
width:100%;
height:500px;
background:#CCC;
margin:0;
}
#child{
width:50%;
height:50%;
background:#EEE;
position:relative;
top:25%;
left:25%;
}
This question already has answers here:
Is it possible to make a div 50px less than 100% in CSS3? [duplicate]
(6 answers)
Closed 9 years ago.
I have two divs. I want the one on the left to be 200px. I want the one on the right to fill up whatever the screen width is - 200px. In other words the div on the right should be 100% of the available space after the div on the left is drawn. Is there a pure css way of doing this?
rough example
<div class='l'></div><div class='r'></div>
.l {
display:inline-block;
background:green;
width:100px;
height:20px;
}
.r {
background:red;
height:20px;
}
Working jsFiddle Demo
Consider the following markup:
<div id="fixed">Fixed Width</div>
<div id="flexible">Flexible Width</div>
And in your CSS:
#fixed {
background: red;
float: left;
width: 200px;
}
#flexible {
margin-left: 200px;
background: green;
}