Im trying to vertically centre an image using CSS display table-cell. WHy is my code not working? It looks like it should according to css-tricks.css
http://css-tricks.com/centering-in-the-unknown/
http://jsfiddle.net/sNE4y/1/
.cont {
background-color: grey;
position: fixed;
height: 100%;
width: 100%;
display: table;
}
img {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<img src="http://www.quarktet.com/Icon-small.jpg" />
</div>
The img tag doesn't need display: table-cell; and vertical-align: middle; its parent does.
So you need:
.cont {
background-color: grey;
position: fixed;
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
}
img {
}
<div class="cont">
<img src="http://www.quarktet.com/Icon-small.jpg" />
</div>
Also, it appears that position: fixed is giving this problems, as well, and I had to remove that to get it to work here: http://jsfiddle.net/sNE4y/6/
If you still need position: fixed; (I'm assuming you do) then perhaps you need another parent div, but that all depends on how you want it designed.
Related
I'm trying to format a HTML DIV in a way that the margin-top is set responsively based on the div's height: jsfiddle
There's another div inside the wrapper, that has a display: none set to it, but it may change when the user inputs a wrong password. Thing is, there is a div below that it's being pushed down when display: content is set to the second div. I want the content of the page to responsively go upwards instead of downwards.
How's now:
How it should be:
Given your example, your goal and your preference to avoid flexbox due to IE10, I think your best option is to use display:table for this container.
With this, you have the ability to use vertical-align properties in the "table-cell".
Check the example below. I added a toggle button to show/hide your captcha for demo purposes. May want to view it full screen to get the effect.
$("#toggle").on('click', function() {
$(".captcha").toggle();
});
html,body {
height: 100%;
}
.outer-wrapper {
height: 100%;
width: 100%;
background: #eeeeee;
display: table;
}
.inner-wrapper {
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
height: inherit;
}
.login-wrapper {
background-color: #172238;
color: white;
width: 200px;
text-align: center;
height: auto;
display: block;
margin: 0 auto;
}
.captcha{
margin-top: 250px;
display: content; // This one changes
}
.homologation-line {
min-width: 200px;
background-color: #ffd800;
color: black;
text-align: center;
height: 30px;
}
#toggle {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle captcha</button>
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="login-wrapper">
<p>Login</p>
<div class="captcha">
ENTER THE DIGITS:
</div>
</div>
<div class="homologation-line">
HOMOLOGATION
</div>
</div>
</div>
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 want to make dynamic width columns inside of dynamic width div. Everything seems to be working just fine, but if I want to make the sum of column widths 100%, the third column jumps down even though there is still space. And I can't get rid of the spacing after each column.
Maybe some of you might know why?
Here is my fiddle!
http://jsfiddle.net/vMe5L/
My code:
<style>
.content { width: 300px; height: 200px; background-color: gray; }
.left { width: 20%; display: inline-table; height: 100%; background-color: red; }
.middle { width: 30%; display: inline-table; height: 100%; background-color: blue; }
.right { width: 47%; display: inline-table; height: 100%; background-color: yellow; }
</style>
<div class="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
Thanks in advance, you guys are amazing.
Either float the elements, or remove the whitespace in between. On inline elements (which includes styling them to display: inline-table or inline-block), whitespace is shown too, even if it is collapsed to a single space. So:
<div class="content"><div class="left"></div><div class="middle"></div><div class="right"></div></div>
works fine.
Better to use table and table-cell display.
Demo: http://jsfiddle.net/abhitalks/vMe5L/5/
CSS:
div { box-sizing: border-box; }
.content { display: table; width: 300px; height: 200px; background-color: gray; }
.left { width: 20%; display: table-cell; height: 100%; background-color: red; }
.middle { width: 30%; display: table-cell; height: 100%; background-color: blue; }
.right { width: 50%; display: table-cell; height: 100%; background-color: yellow; }
Update:
If you want to stick to inline-table, then get rid of the white spaces. The best way would to introduce comments:
<div class="content">
<div class="left"></div><!--
--><div class="middle"></div><!--
--><div class="right"></div>
</div>
Try this out:
Fiddle
Changes made,
added css display:table to outer class content, and inner classes changed to display:table-cell;
I'm a newbie when it comes to CSS. I'm working with a HTML content which I would want to look like 3 columns in a single row. I've the following HTML with embedded style:
<style type="text/css">
#main {
width: 100%;
height: 250px;
}
#left-side {
width: 20%;
float: left;
height: 100%;
}
#in-the-middle {
width: 60%;
text-align: center;
display: inline-block;
height: 100%;
}
#right-side {
width: 20%;
display: inline-block;
height: 100%;
}
</style>
<div id="main">
<div id="left-side" align="left">
Hello left
</div>
<div id="in-the-middle" align="center">
Hello center
</div>
<div id="right-side">
Hello right
</div>
</div>
Looks simple, but unfortunately the "Hello right" text gets displayed at the left side of the page. I have set the display for the #right-side to be inline-block, expecting it to show up adjacent to the "Hello center" div, but it doesn't seem to take effect. Can anyone see what I'm missing here?
Since the elements become rendered inline, white-space in your HTML code will affect the rendering. Since there is whitespace between your divs, the browser will render several pixels of white spaces between them.
If you want to use inline-block without float, the solution is to remove the white spaces between each ending tag </div> and opening <div> tag, like his:
<div id="left-side">
Hello left
</div><div id="in-the-middle">
Hello center
</div><div id="right-side">
Hello right
</div>
See live action here: http://jsfiddle.net/LbNGq/
Use your right-side div width as slightly small then it shows in the same column
#right-side {
width: 19%;
display: inline-block;
height: 100%;
}
See Demo
Use float:left with display: inline-block
try this css script
<style type="text/css">
#main {
width: 100%;
height: 250px;
display: inline-block;
}
#left-side {
width: 20%;
float: left;
height: 100%;
}
#in-the-middle {
width: 60%;
text-align: center;
display: inline-block;
height: 100%;
float:left;
}
#right-side {
width: 20%;
display: inline-block;
height: 100%;
float:left;
}
I have this div and inside the div is an image, and what I am trying to do is vertically align the image to be centered in the middle and nothing I try seems to work...
<div style=" height: 200px; vertical-align: middle; width: 225px;">
<img width="225" src="upload/home5.jpg">
</div>
I've also tried this adding a vertical-align:middle; to the image as well, but that didn't work.
Anyone got any ideas?
I forgot to mention that I am using some jQuery code and it makes my div position:absolute;
this is what my div looks like after it goes through the Jquery
<div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 225px; height: 200px;">
and here is the css for the image
img {
background-color: #eee;
margin: auto;
display:block;
}
You can use display: table-cell for this on the div. This allows vertical-align attribute to work. No support for IE7. If you need that there are other solutions.
http://jsfiddle.net/5HzpM/
div { border: 1px solid gray; display: table-cell; }
img { vertical-align:middle; }