In the following style from the website: http://6.470.scripts.mit.edu/css_exercises/exercise4.html
<style type="text/css">
#sponsors {
margin:auto;
margin-top:50px;
overflow: hidden;
width: auto;
display: inline-block;
}
div.image img {
margin: 3px;
border: 1px solid #ffffff;
}
div.image a:hover img {
border: 1px solid;
}
</style>
</head>
<body>
<h1>Sponsors of 6.470</h1>
<div id="sponsors">
<div class="image"><img src="images/appian.png" width="150" height="85"></div>
<div class="image"><img src="images/dropbox.png" width="150px" height="85px"></div>
<div class="image"><img src="images/facebook.png" width="150px" height="85px"></div>
<div class="image"><img src="images/nextjump.png" width="150px" height="85px"></div>
<div class="image"><img src="images/palantir.png" width="150px" height="85px"></div>
<div class="image"><img src="images/quora.png" width="150px" height="85px"></div>
<div class="image"><img src="images/tripadvisor.png" width="150px" height="85px"></div>
<div class="image"><img src="images/vecna.png" width="150px" height="85px"></div>
</div>
</body>
if the width: auto is removed from #sponsors then the div#sponsors is not center aligned even though margin: auto is used.
Similarly if instead of text-align: center is replaced by margin: auto in body style above, then the <h1> will not be center aligned which is preposterous;
because I have used margin: auto a lot of times and it was able to center the content without any issue. So hence help me and I will appreciate this a lot.
PS: I used firefox and besides use the doctype tag it is still not able to center with margin: auto.
Define width or margin on your #sponsors ID
as like this
#sponsors{
margin:0 auto; // left margin is auto, right margin is auto , top and bottom margin is 0 set
width:1000px; // define your width according to your design
}
More about margin auto
No need of using margin: 0 auto. Try the below code, it will work:
div#sponsors{
/* other css properties */
/* remove display:inline-block and margin: auto */
width:100%; /* instead of width: auto */
text-align: center;
}
div.img{
/*remove float:left */
/* other css properties */
display: inline-block;
}
Remove text-align: center from body tag and give to h1 tag instead.
For centering DIV you need to set css for below.
Example
#sponsors {
margin:0px auto;
}
Comment
You also need to set width for div.
DEMO
You must specify width to div and don't give margin twice
#sponsors {
margin:50px auto 0 auto;
margin-top:50px;
overflow: hidden;
width:160px;
background:aqua
}
DEMO
TO use margin:auto you should use position:relative, oh, and define a width
Imagine you as a browser, how do you center a "box" (like div) if you don't know what is the width of that? ;)
I hope to help you
correcting: as Christopher Marshall said you don't need position:relative but specify width.
If any div u want in center for margin auto always this div width is fix ......
#sponsors {
width:XXpx;
margin:50px auto 0;
overflow: hidden;
display: inline-block;
}
div{
position: relative;
border: 1px solid #ddd;
width:150px;
height:50px;
margin: auto;
/*position: absolute; top: 0; left: 0; bottom: 0; right: 0;*/
}
img.displayed {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
<html>
<div >
<a>
<img class="displayed" src="smiley.gif" >
</a>
</div>
</html>
demo added in jsfiddle
Take a look, maybe you have there a float property. In my case, setting float to none helps. Now div is properly aligned.
This worked for me!
.classofdiv{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
margin: auto doesn't put the element in center if width of element is 100%. So give some width to element and use margin: auto. It worked for me.
Related
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 have a problem on making CSS to fill remaining width space. I've tried so many other answers in stackoverflow and the same problem occur, the div keeps on breaking into a new line. Here's my code:
http://jsfiddle.net/YSLJX/
I've tried these but nothing works...
width: 100%
width: available
width: auto
You can simplify your html, float the image element left (u_img) then apply overflow hidden to the second element (u_msg), this will 'tell' it to apply block level behaviour and stretch to the remaining space.
Demo Fiddle
HTML
<div id="chat" style="height: 350px;">
<div class="u_img">
<img src="https://lh3.googleusercontent.com/-g_zvhql17tw/AAAAAAAAAAI/AAAAAAAAARE/xQMDsE3q_K0/w48-c-h48/photo.jpg"" />
</div>
<div class="u_msg"><span class="post_time">Tue May 6 13:52:34 2014</span><span class="u_name"><b>Qixster</b>:</span><span id="msg_container" style="color: #000;font-size: 16px;">test</span>
</div>
</div>
CSS
#chat {
width: 100%;
height: 100%;
overflow:hidden;
border: 1px solid #c0c0c0
}
.msg {
border: 1px solid #c0c0c0;
min-height: -moz-fit-content;
min-height: -webkit-fit-content;
min-height: fit-content;
}
.u_img {
float: left;
max-height: 48px;
}
.u_msg {
padding-left: 5px;
font-family:'Ubuntu', sans-serif;
word-wrap: break-word;
overflow:hidden;
}
.u_name {
float: left;
}
.post_time {
float:right;
right:0px;
color:#c0c0c0;
font-size:10px;
}
The alternative would be to apply a display:table structure
Basically I have a nested <div> as a footer and the parent div is centered 1000px wide.
I was wondering if it was possible to extend the width of footer div so that it goes out of the parent to fit the browsers width but still keeps its place in the parent?
My solution assumes that .parent element has stretched height. even if it is not the case, then it seems you want the .footer element stick to the bottom of the page. If it is so, then using position:absolute you can bring the child block out of the parent block and then pin it to bottom using bottom: 0px and then to stretch its width use left:0px and right: 0px.
Working Fiddle
UPDATED:
Use this Doctype declaration:
<!DOCTYPE html>
Also, in .footer element mention top:auto css property. Something like this:
.footer{
padding: 0px 15px;
height: 50px;
background-color: #1A1A1A;
position:absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: auto; /* added (IE FIX) */
}
Something that would work for you:
.parent{
width: 300px; /* your parent width */
}
.footer{
height: 50px; /* your footer height */
position:absolute;
left: 0px;
right: 0px;
}
Demo
You could set the footer position to relative and set the left property to -100px and width to 1200px for example.
Better still don't have it in the parent div, have it as it's own div with it's own values set.
Do like this
html
<div id="parent" class="wrap"></div>
<div id="footer"></div>
css
.wrap{width: 1000px;}
#footer{width: 100%;}
Try this CSS.
#footer {
position:absolute;
bottom:0;
width:100%;
}
Try this css this will definitely work as you want
html,body{
height: 100%;
padding: 0px;
margin: 0px;
}
.parent{
width: 400px;/*put your width here*/
height: 100%;
background-color: #ccc;
margin: 0 auto;
}
.footer{
padding: 15px 0px;
height: 30px;
background-color: #000;
position:absolute;
bottom: 0px;
left: 0px;
width:100%
}
If you really want to bypass the parent element, you could look into display:contents
https://css-tricks.com/get-ready-for-display-contents/
It really is a game changer if you need a div to wrap elements for some logic reason, but want the styling of all seperate elements.
Example without:
.main {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: row;
}
<div class="main">
<div class="title">
<h2>Foo</h2>
<span>Bar</span>
</div>
<button>shamefull_button</button>
</div>
Example with:
.main {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: row;
}
.title {
display: contents;
}
<div class="main">
<div class="title">
<h2>Foo</h2>
<span>Bar</span>
</div>
<button>shameless_button</button>
</div>
I'm struggling with working out how to get this to work.
I have an image inside a wide-header div. It's a responsive header, so the image is set to width:100% to make the banner resize to the size of it's container.
Problem is, the image needs to sit full width, but the container has a 10px margin on either side.
The HTML cannot change as it's CMS based. The banner must sit inside region-content with it's margin of 10px either side
I have successfully managed to push the image to the left most edge by using a position:relative on the image and placing it left:-10px to counter the left side gap.
Problem I am having is doing the same on the opposite side, as I cannot extend the width. The banner needs to be 20px wider... but it's set as a percentage based width so simply adding 20px doesn't work.
Essentially I need to work out how to get this to work as 100% + 20px.
It's for mobile so border-box:box-sizing could be used, but I cannot utilise this correctly, though I am sure a solution may require it.
JS Fiddle
HTML
<div id="region-content">
<div class="content">
<!-- HEADER IMAGE -->
<div id="wide-header">
<img src="http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg" width="1400" height="475" alt="">
</div>
</div>
</div>
CSS
body{margin:0 auto;}
#region-content{
margin-left: 10px;
margin-right: 10px;
outline:1px solid red;
}
#wider-header{
width: 100%;
box-sizing: border-box;
overflow: hidden;
max-height: 300px;
text-align: center;
background-color: #333;
}
#wide-header img {
width: 100%;
height: auto;
margin: 0 auto;
max-width: 1300px;
position:relative;
left:-10px;
}
Another way is to do the following (although you might have to look at your other content inside the #wide-header)
position:relative;
left:-10px;
to
position:absolute;
left:0;
right:0;
I have updated your fiddle http://jsfiddle.net/zr8xp/3/
If you want increase the width more than 100%. Try width:105%; see this editted fiddle its the same as 100% + 20px
width:105%;
If you are not bothered about old versions of IE you can try this way:
width: calc(100% + 20px);
JSFIDDLE
I update your jsfidle by adding some css modifications:
link: http://jsfiddle.net/zr8xp/8/
CSS:
body{margin:0 auto;}
#region-content{
margin-left: 10px;
margin-right: 10px;
outline:1px solid red;
}
#wider-header{
width: 100%;
box-sizing: border-box;
overflow: hidden;
max-height: 300px;
text-align: center;
background-color: #333;
padding-left: 10px;
padding-right: 10px;
}
#wide-header img {
width: 100%;
height: auto;
margin: 0 auto;
max-width: 1300px;
position:relative;
}
HTML:
<div id="region-content">
<div class="content">
<!-- HEADER IMAGE -->
<div id="wide-header">
<img src="http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg" width="1400" height="475" alt="">
</div>
</div>
</div>
Try this:
#wide-header img {
height: auto;
margin: 0 -10px;
max-width: 1300px;
}
Another approach worth considering is using a background image instead. E.g.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
body{margin:0 auto;
background-image: url(http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 0;
}
#region-content{
margin-left: 10px;
margin-right: 10px;
outline:1px solid red;
min-height: 600px;
}
#wider-header{
width: 100%;
box-sizing: border-box;
overflow: hidden;
max-height: 300px;
text-align: center;
background-color: #333;
}
</style>
</head>
<body>
<div id="region-content">
<div class="content">
<div id="wide-header">
</div>
</div>
</div>
</body>
</html>
I did this by putting my img in a DIV and set the div style: float:right;width:0px;overflow:visible;
This created the image to the right of main content div, outside of the width of my header and other content.
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>