My HTML code looks like this:
<div class="ctn">
<img src="some-img.jpg"/>
</div>
The ctn should be a fixed size, say, 150*150.
But the size of IMGs may bigger or smaller: 200*50, 50*200, 50*50 etc.
How do i make the image fit in the center of the div ? The image's proportion should not be changed.
====UPDATE====
Yes, I need both hori & vertical center.
You could add css, to center the image both horizontally and vertically:
DIV.ctn {
min-height: 150px;
min-width: 150px;
margin-left: auto;
margin-right: auto;
text-align: center;
display: table-cell;
vertical-align: middle }
...
<div class="ctn">
<img src="some-img.jpg"/>
</div>
Edit: for details see: http://www.w3.org/Style/Examples/007/center.html
Try the following:
text-align: center;
display: table-cell;
vertical-align: middle;
DEMO
i think this is your answer
.container img { width: 100%;}
.container {display: table-cell;vertical-align: middle}
http://jsfiddle.net/RUQAM/1/
it fits, in the center of your fixed size div, and image proportions are not changed.
EDIT: re-reading, you want the image size to be fixed.
div.cnt {
margin-left: auto;
margin-right: auto;
text-align: center;
display: table-cell;
vertical-align: middle;
min-height: 150px;
min-width: 150px;
}
The easiest way should be :
div.cnt {
width: 150px;
height: 150px;
}
<div class="ctn" style="background: url('some-img.jpg') 50% 50% no-repeat;">
</div>
If the ctn has to be a fixed sized (ex: 150x150) and the image has to be proporcional and not bigger than that div, this is a solution:
CSS
.ctn{
background-color:#F00;
margin-left:auto;
margin-right:auto;
position:relative;
overflow:hidden;
height:150px;
width:150px;
}
.ctn div{
display:table-cell;
vertical-align: middle;
text-align:center;
}
.ctn div img{
width:150px;
}
HTML
<div class="ctn">
<div>
<img src="url" />
</div>
</div>
This way will center the div in the middle of the screen and the image will not be bigger than 150x150 but it will mantain its proporcionality.
Give id to your like
then in your css →
#foto{
margin-left:180px;
}
set style="margin-let:auto; margin:right:auto"
also specify width to the image else it will not work
Related
I'm struggling trying to find a way to vertically align two images on two different columns
but I don't know how to do it.
Here the css of the two columns:
.left {
width: 50%;
height: 100%;
float: left;
text-align: center;
}
.right {
width: 50%;
height: 100%;
float: left;
text-align: center;
}
http://jsfiddle.net/6o6zwqLb/
I guess it should be pretty simple.
DEMO: http://jsfiddle.net/j55dxbe3/
I would use inline-block and make sure that my inline-block elements have no gap in the html (I used a comment to do this rather than making the font-size:0px on the parent and then putting a font size on the children).
HTML
<div id="center">
<div class="left">
<img src="http://placekitten.com/g/250/375" width="250" height="375" />
</div><!-- comment to close gap
--><div class="right">
<img src="http://placekitten.com/g/333/500" width="333" height="500" />
</div>
</div>
CSS:
.left, .right {
width: 50%;
height: 100%;
display:inline-block;
text-align: center;
vertical-align:middle;
}
Displaying your elements as table cells should cure what ails you:
#center {
...
display: table;
}
#center > div {
display: table-cell;
vertical-align: middle;
}
Demo
.left > img {
margin-top: 62px;
}
A margin-top of 62px on the smaller image will move it down where it is (about) 62px to the bottom of the page.
Demo
I m trying to center an image in a div while keeping the aspect ratio - I m using this code but somehow its not aligning the item in the center (top/bottom center). If possible using only CSS.
The size of the image is not known since its using max widths!
JSfiddle: http://jsfiddle.net/L41wpza6/2/
#imageHolder {
width: 400px;
height: 400px;
line-height: 400px;
background-color:#CCCCCC;
}
#imageHolder img {
max-width: 100%;
max-height:100%;
display: block;
margin: 0 auto;
vertical-align: middle;
}
Any help is appreciated! I am not sure what I am missing to make this work.
JSFiddle - DEMO
You should use display: inline-block; to #imageHolder img to vertical-align middle.
CSS display inline-block property allows elements to flow like inline elements but respect properties, such as width, like block elements and you can use display Inline-block to set vertical-align middle.
HTML:
<div id="imageHolder">
<img src="http://www.discoverjb.com/wp-content/uploads/2014/07/IMG_1399.jpg">
</div>
CSS:
#imageHolder {
width: 400px;
height: 400px;
line-height: 400px;
background-color:#CCCCCC;
}
#imageHolder img {
max-width: 100%;
max-height:100%;
display: inline-block; /* Instead of display: block; */
margin: 0 auto;
vertical-align: middle;
}
for one looking for horizontally center.
Solution of #sibbl worked, but there is still some pixels on the top of image in horizontal case.
I have imporoved #Anoymous code
HTML:
<div class="imageHolder">
<img src="http://lorempixel.com/g/800/400">
</div>
<div class="imageHolder">
<img src="http://lorempixel.com/g/800/800">
</div>
<div class="imageHolder">
<img src="http://lorempixel.com/g/400/800">
</div>
CSS:
.imageHolder {
width: 300px;
height: 300px;
background-color:#CCCCCC;
margin:10px;
display:inline-block;
float:left;
position:relative;
}
.imageHolder img {
max-width: 100%;
max-height:100%;
margin: auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
JSFiddle - DEMO
I'm having trouble because I have a div I want to center and what I have
usually been told to do is this:
width: 700px;
margin-left: auto;
margin-right: auto;
the trouble is, this is for if you want the div to be a fixed width. I want the div
to adjust its size based on the text in the div, and still be centered. I tried:
width: auto;
margin-left: auto;
margin-right: auto;
but this didn't work. It stretches the div to fill up the screen when I do this.
Anyone know what to do here?
for parent block or body - text-align:center;
for centerd block- display:inline-block;
.center {
display: inline-block;
background: red;
}
body {
text-align: center;
}
<div class="center">
<p contenteditable="true"> write text </p>
</div>
DEMO http://jsfiddle.net/RXP4F/
Content Editable MDN
have you tried the approach shown here?
http://www.tightcss.com/centering/center_variable_width.htm
basically.
put your content inside a floated div
put that floated div within another floated div
put left: 50%, position relative on outer div
put left: -50%, position relative on inner div
finally, nest everything in one more div with overflow:hidden
.outermost-div{
background-color: blue;
overflow:hidden;
}
.inner-div{
float:left;
left:50%;
background-color: yellow;
position: relative;
}
.centerthisdiv {
position:relative;
left: -50%;
background-color: green;
float:right;
width:auto;
}
here is my jsfiddle demonstration:
http://jsfiddle.net/wbhyX/1/
Use margin:
0px auto; and display: table;
There are example:
https://jsfiddle.net/da8p4zdr/
You might want to try CSS display:table-cell or display:table
Try this structure.
<div class="container">
<div class="center_div">
</div>
</div>
.container{
float: left;
left: 50%;
position: relative;
}
.center_div{
position: relative;
left: -50%;
float: left;
}
zloctb's answer on Aug 30 '13 at 4:14 actually worked in principle but was incomplete. If you want your element width to be 'auto' based on the contents within it AND centered within its parent BUT with the contents inside the CHILD element left-aligned, do the following (because it really is the simplest way):
.parent {
width: 100%;
text-align: center;
}
.parent div.child {
display: inline-block;
text-align: left;
width: auto;
}
(Obviously, if you just wanted everything strictly centered, you would not need the code for the child element.)
EDITED:
use table, it could be easier to style. Then add div into the tr
.outer-container {
position: relative;
left: 50%;
float: left;
clear: both;
margin: 10px 0;
text-align: left;
}
.inner-container {
background: red;
position: relative;
left: -50%;
text-align: left;
}
Centering an element horizontally can get a little weird, as the functionality isn't very intuitive. Really, you need to play games with text-align:center; and margin:auto, and you'll need to know when to use which.
For example, if I want to center the contents of an element (raw-text), including buttons and inputs, I can use text-align:center.
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
</div>
If we add other elements to our container, those elements will have their width forced to 100%. This helps us emulate that it is centered because technically, at 100%, it is centered! Silly, isn't it?
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
<p style="background-color:orange;width:auto" >Even though my width is explicitly defined as "auto," I still have 100% width! What gives?!</p>
</div>
If your width property IS defined though, then you can use the margin: auto style to center it within the parent.
<div style="margin:auto;border:1px solid black;width:300px;" >
I am centered!
</div>
You need to determine which solution is best for you. I wish I could help more, but it is hard to know what solution will best fit your needs when you haven't provided the HTML for you problem!
Either way, I hope this JSFiddle helps clear things up!
On a fluid site I am using a Wrap to center the content and its CSS is:
#Wrap {
margin: 0 auto;
width: 90%;
}
Is it possible to have a centered fluid wrap but with fixed margins in pixels?
Thank You,
Miguel
Is this what you are looking for?
Apply text-align:center; on the parent element and display:inline-block; on the child element
FIDDLE
<div class="outer" >
<div id="Wrap"></div>
</div>
css
.outer
{
background:yellow;
text-align:center;
width: 100%;
height: 100%;
}
#Wrap {
margin: 15px;
width: 90%;
height: 100px;
background:pink;
display:inline-block;
}
I have a markup like this:
<div>
<img />
</div>
The div is higher than img:
div {
height: 100px;
}
img {
height: dynamic-value-smaller-than-100px;
}
I need the image to be in the middle of the div (have same amout of white space above and below it).
I tried this and it does not work:
div {
vertical-align: middle;
}
if your image is purely decorative, then it might be a more semantic solution to use it as a background-image. You can then specify the position of the background
background-position: center center;
If it is not decorative and constitutes valuable information then the img tag is justified. What you need to do in such case is style the containing div with the following properties:
div{
display: table-cell; vertical-align: middle
}
Read more about this technique here. Reported to not work on IE6/7 (works on IE8).
Another way is to set your line-height in the container div, and align your image to that using vertical-align: middle.
html:
<div class="container"><img></div>
css:
.container {
width: 200px; /* or whatever you want */
height: 200px; /* or whatever you want */
line-height: 200px; /* or whatever you want, should match height */
text-align: center;
}
.container > img {
vertical-align: middle;
}
It's off the top of my head. But I've used this before - it should do the trick. Works for older browsers as well.
Let's say you want to put the image (40px X 40px) on the center (horizontal and vertical) of the div class="box". So you have the following html:
<div class="box"><img /></div>
What you have to do is apply the CSS:
.box img {
position: absolute;
top: 50%;
margin-top: -20px;
left: 50%;
margin-left: -20px;
}
Your div can even change it's size, the image will always be on the center of it.
This is a solution I've used before to accomplish vertical centering in CSS. This works in all the modern browsers.
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Excerpt:
<div style="display: table; height: 400px; position: relative; overflow: hidden;">
<div style="position: absolute; top: 50%;display: table-cell; vertical-align: middle;">
<div style="position: relative; top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
(Inline styles for demonstration purposes)
Another option is to set display:block on the img and then set margin: 0px auto;
img{
display: block;
margin: 0px auto;
}
As I too am constantly being let down by cross-browser CSS, I'd like to offer a JQuery solution here. This takes the height of each image's parent div, divide it by two and set it as a top margin between the image and the div:
$('div img').each(function() {
m = Math.floor(($(this).parent('div').height() - $(this).height())/2);
mp = m+"px";
$(this).css("margin-top",mp);
});
There are five possible ways for centering an image with any size with pure CSS.
Using flex and making the img tag be inside (best solution for modern browsers):
div {
display: flex;
align-items: center;
justify-content: center
}
Putting the image in background-image and using background-position (as #pixeline explained):
div {
background-image: url(...);
background-position:center center
}
Using display: table for parent element, and using display: table-cell with vertical-align: middle for child element:
div.parent {
display: table;
}
div.child {
display: table-cell;
vertical-align: middle;
}
Using position:absolute with transform for the image and parent element position be not unset:
div {
position: relative;
}
div > img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Using line-height as same height of the element, then using vertical-align (in my opinion, the best solution for supporting more browsers like IE9>).
Note: In some old browsers, sometimes for using this way safely, you need to have at least one character in the line that the image exist. For fixing this issue, I used a non-breakable space in a pseudo-element of the parent.
As in the following example:
div {
display: block;
height: 200px;
width: 200px;
background-color: purple;
line-height: 200px;
text-align: center;
}
div:after {
content: "\a0";
}
div > img {
vertical-align: middle;
}
<div><img src="https://via.placeholder.com/100.png/09f/fff" /></div>
I've posted about vertical alignment it in cross-browser way (Vertically center multiple boxes with CSS)
Create one-cell table. Only table has cross-browser vertical-align
image to be in the middle of the div
div img{
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
height:50px;
width:50px;
}
In your example, the div's height is static and the image's height is static. Give the image a margin-top value of ( div_height - image_height ) / 2
If the image is 50px, then
img {
margin-top: 25px;
}
Have you tried setting margin on the div? e.g.
div {
padding: 25px, 0
}
for top and bottom. You may also be able to use a percentage:
div {
padding: 25%, 0
}
<div style="background-color:#006600; width:300px; text-align:center; padding:50px 0px 50px 0px;">
<img src="imges/import.jpg" width="200" height="200"/>
</div>
The accepted answer did not work for me. vertical-align needs a partner so that they can be aligned at their centers. So I created an empty div with full height of the parent div but with no width for the image to align with. inline-block is needed for both objects to stay in one line.
<div>
<div class="placeholder"></div>
<img />
</div>
CSS:
.class {
height: 100%;
width: 0%;
vertical-align: middle;
display: inline-block
}
img {
display: inline-block;
vertical-align: middle;
}
div {
width:200px;
height:150px;
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display:box;
box-pack:center;
box-align:center;
}
<div>
<img src="images/logo.png" />
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function ($) {
$.fn.verticalAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah)/2);
$(this).css('margin-top', mh);
});
};
})(jQuery);
$(document).ready(function(e) {
$('.in').verticalAlign();
});
</script>
<style type="text/css">
body { margin:0; padding:0;}
.divWrap { width:100%;}
.out { width:500px; height:500px; background:#000; text-align:center; padding:1px; }
.in { width:100px; height:100px; background:#CCC; margin:0 auto; }
</style>
</head>
<body>
<div class="divWrap">
<div class="out">
<div class="in">
</div>
</div>
</div>
</body>
</html>
If you want content to be what ever you need to have inside a div, this did the job for me:
<div style="
display: table-cell;
vertical-align: middle;
background-color: blue;
width: ...px;
height: ...px;
">
<div style="
margin: auto;
display: block;
width: fit-content;
">
<!-- CONTENT -->
<img src="...">
<p> some text </p>
</div>
</div>