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; }
Related
I need to create upload button that centered at an image.
I'm a beginner, please help and explain how to use. Many thanks.
Here is my code:
https://jsfiddle.net/marco83/ydgnkfw3/
HTML
<div class="media-left text-center container22">
<img src="http://images.buddytv.com/btv_2_505531673_0_1200_10000_-1_/the-pacific-james-ba.jpg" style="width: 150px; height: 150px;" class="image1"></img>
<a href="#" id="upfile1">
<span style="font-size: 28px;" id="img-upload-bt" class="glyphicon glyphicon-camera"></span>
</a>
</div>
<input type="file" id="file1" name="file1" style="display:none" />
CSS
.container22 {
height: 10em;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#upfile1 {
margin-left: auto;
margin-right: auto;
}
Here is what i want
One approach is to make the parent container relative and use position absolute for the inner element you're trying to center:
.image-container {
position: relative;
}
#img-upload-bt {
position: absolute;
left: 50%;
top: 50%;
margin: -14px 0 0 -14px;
}
JSFiddle Demo
The easiest way to handle this would be to just set the image as a background-image in the css, if that's something your particular situation allows for -
.container22 {
height: 150px;
width: 150px;
background: url("http://images.buddytv.com/btv_2_505531673_0_1200_10000_-1_/the-pacific-james-ba.jpg") center center no-repeat;
}
That + removing the image tag for the markup will create the look you want.
If you have to use the image inline, you can put position:relative on the container element, and position either the image or the upload glyph span with position: absolute - note that you may have to force a width and height on the container if you set that on the image. If you set it on the glyph span, you'll also need left:0; right:0; margin: auto; to center it.
The image pushes the icon out of the way
Use background image instead
.container22{
width:150px;
height:150px;
background-image:url('http://images.buddytv.com/btv_2_505531673_0_1200_10000_-1_/the-pacific-james-ba.jpg');
background-size:150px 150px;
background-position:center top;
display: table-cell;
vertical-align: middle;
text-align: center;
padding-right:0
}
https://jsfiddle.net/marco83/ydgnkfw3/
You need to set the css position property of the parent element to relative and img to position:absolute. Then you use css properties of top, bottom, left and right to position the image.
.container22 {
height: 10em;
display: table-cell;
vertical-align: middle;
text-align: center;
position:relative;
}
#upfile1 {
position: absolute;
left:55px;
top:55px;
}
See an example here.
I have a in my webpage which carries 2 images. I want one image to be aligned left and other to the right end of the division.
The JsFiddle
Here's my HTML:
<div class="header">
<img id ="ttl" src="Home_files/images/ttl.png">
<img id ="se" src="Home_files/images/se.png">
</div>
and CSS:
.header {
position: relative;
top: 0%;
height: 20%;
}
/*Header CSS*/
img#ttl {
position: relative;
top:50%;
height: 50%;
left: 0px;
}
img#se {
position: relative;
top:60%;
height:30%;
vertical-align:right;
margin-right: 2%;
}
PS: I tried float:right;. Its works in in Chrome and FF but not in IE.
And ofcourse this div has a parent div. But I don't think that will be a problem.
You can wrap the images inside a position relative container and use position: absolute; to position them to bottom left and bottom right
Demo
<div class="wrap">
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
div.wrap {
width: 600px;
border: 1px solid #f00;
height: 300px;
position: relative;
}
.wrap img {
border: 1px solid blue;
position: absolute;
bottom: 0;
}
.wrap img:nth-of-type(1) {
left: 0;
}
.wrap img:nth-of-type(2) {
right: 0;
}
Note: Am using nth-of-type to select images so that I don't have to
declare classes for each image, if you want to support older browsers,
you need to add class for each image and replace :nth-of-type with
those classes
try this
<div class="header">
<div class="left"><img id ="ttl" src="Home_files/images/ttl.png"></div>
<div class="right"><img id ="se" src="Home_files/images/se.png"><div>
</div>
CSS
.left{
float:left;
}
.right{
float:right;
}
Demo
I used a table in a basic HTML header div for an email. It worked fine. In tr, had one image on left as td and another on right with float: right in another td.
I am trying to vertically align the text in a floated div to the bottom but it doesn't seem to work. Here is what I currently have:
<div class="header_left">TEXT</div>
CSS:
.header_left {
width: 50%;
text-align: left;
float: left;
vertical-align: bottom;
border-bottom: 1px solid #666;
}
I need the div to be floated as I want to place 2 divs side by side but I cannot seem to make the text go to the bottom of the div.
Working DEMO
You need to have 2 divs to achieve this with relative and absolute position.
<div id="container">
<div id="content">Bottom Content</div>
</div>
#container
{
position: relative;
height: 200px;
background-color: #eee;
}
#content
{
position: absolute;
bottom: 0;
}
http://jsfiddle.net/2Z6tA/1/
<div class="header_left">
<span id="bottom">Text at bottom</span>
</div>
CSS:-
.header_left {
width: 50%;
text-align: left;
float: left;
vertical-align: bottom;
border-bottom: 1px solid #666;
height:100px;
position: relative;
}
span#bottom{
position: absolute;
bottom: 0;
}
Another thing to try if you dont want a div container, set a margin top & bottom. For example:
.header_left {
margin-top:50%
margin-bottom:50%
}
You'll have to tinker with the measurements, 50% isn't always the amount to use. I used 9% to vertically align a floating :before image on a button on a mobile site I was working on.
I'm trying to put two divs without a linebreak between them.
this is the html:
<div id="header">
<div id="logo"></div>
<div id="left">
<div id="slideshow"></div>
</div>
</div>
and this is the CSS:
#header {
background-color: #13768a;
width: 962px;
height: 207px;
margin-right: auto;
margin-left: auto;
clear: both;
}
#logo {
background-image:url('logo.png');
height: 207px;
width: 250px;
margin-right: 0px;
padding: 0px;
}
#left {
width:712px;
height: 207px;
}
#slideshow {
background-color: #137387;
width: 686px;
height: 144px;
margin-right: auto;
margin-left: auto;
}
the problem is that I want it to look like this:
How I want it to look like
But it looks like this:
How it looks like
This is controlled by the display style property. Normally, div elements use display: block. You can use display: inline or display: inline-block instead if you want them on the same horizontal line.
Example using inline-block (live copy | source):
CSS:
.ib {
display: inline-block;
border: 1px solid #ccc;
}
HTML:
<div class="ib">Div #1</div>
<div class="ib">Div #2</div>
Introduce a float CSS property. Change CSS as below, for #logo and #left.
#logo {
background-image:url('logo.png');
height: 207px;
width: 250px;
margin-right: 0px;
padding: 0px;
float:right;
}
#left {
width:712px;
height: 207px;
float:left;
}
From the MDN Documentation,
The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it.
Div elements normally use display:block which forces a line break before and after the element.If you want to remove the line breaks , you can use display:inline which will display elements horizontally.Make the div's display property to display:inline or display:inline-block you want to appear horizontally .
Try this way:
#logo {
background-image:url('logo.png');
height: 207px;
width: 250px;
margin-right: 0px;
padding: 0px;
float:right;}
#left {
position:relative;
width:712px;
height: 207px;
}
#slideshow {
position:absolute;
top:20px;
left:20px;
background-color: #137387;
width: 686px;
height: 144px;
margin-right: auto;
margin-left: auto;
}
Basically I put a float:right; on the logo to position it right, then added position:relative to the #left div and position:absolute to the #slideshow div. This way you can adjust the top and left attributes to position the slideshow anywhere you want it.
display:inline is the css style that you need to use.
Please Check out the fiddle on http://jsfiddle.net/Qu63T/1/
What I want is The green div to float next to the blue one. and the .block divs to appear as a grid. I don't want to remove the .m div and float the .blocks inside the container. What Can be done without specifying width of .m
No JavaScript Only CSS Solution
You can add a a wrapper div, after .m and before .block and set his width:
<div class="m">
<div class="wrapper">
<div class="block">
(...)
</div>
</div>
</div>
Style:
.wrapper{
width:100px;
}
Or you can add some padding in .m, so the blocks will line-break. But that's a wierd solution.
as i understand your question that you want floated div's work like block div's
your
CSS:
.
block{
border: 1px solid white;
float: left;
display: inline-block;
clear:left;
}
check this http://jsfiddle.net/sandeep/Qu63T/6/
Your best solution in this case would be to assume that "m" isnt floating, its just a padded div sitting inside a bigger container, and the blue div is living absolutely positioned, like this:
.c{
background-color: red;
display: block;
position: relative;
overflow: hidden;
}
.l{
background-color: blue;
height: 40px;
width: 120px;
display: inline-block;
position: absolute;
left: 0;
right:0;
}
.m{
display: block;
position: relative;
margin-left: 125px;
}
.block{
border: 1px solid white;
float: left;
display: inline-block;
background-color: green;
}
http://jsfiddle.net/Qu63T/7/