I want an html image to be flush with the bottom of a div tag. I can't seem to find a way to accomplish this.
Here is my HTML:
<div class="span8">
<img src="/img/play-shot1.jpg" class="text-center shadow">
</div>
The problem is that the div is nested within other divs that have padding or margins.
Add relative positioning to the wrapping div tag, then absolutely position the image within it like this:
CSS:
.div-wrapper {
position: relative;
height: 300px;
width: 300px;
}
.div-wrapper img {
position: absolute;
left: 0;
bottom: 0;
}
HTML:
<div class="div-wrapper">
<img src="blah.png"/>
</div>
Now the image sits at the bottom of the div.
Using flexbox:
HTML:
<div class="wrapper">
<img src="pikachu.gif"/>
</div>
CSS:
.wrapper {
height: 300px;
width: 300px;
display: flex;
align-items: flex-end;
}
As requested in some comments on another answer, the image can also be horizontally centred with justify-content: center;
< img style="vertical-align: bottom" src="blah.png" >
Works for me. Inside a parallax div as well.
Related
I have a flexbox container with two flex items in it. One is an image and the other a paragraph. I've been trying to resize the image proportionally by giving width:some-percentage and height:auto but it's not working. Please help me solve this.
.item{
display:flex;
}
img{
width: 25%; /* not working */
height: auto;
}
<div class="item">
<img
src=
"https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg"/>
<p>some paragraph</p>
</div>
JSFiddle link - https://jsfiddle.net/dizzyramen/xfot3Lwv/2/
A default setting on a flex container is align-items: flex-start.
In a row-direction container, this makes flex items, not having a defined height (e.g. height: auto), extend the full height of the container (full explanation).
In this particular case, however, the image is stretching to its fullest, and expanding the size of the container along with it.
The solution is to set a height limit on the container or override the default with align-items: flex-start on the container or align-self: flex-start on the item.
jsFiddle demo
.item {
display: flex;
}
img {
width: 25%;
align-self: start; /* new */
}
<div class="item">
<img src="https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg" />
<p>some paragraph</p>
</div>
here is another option:
wrap your img in a div <div class="image-wrapper"> and set manage the width in this node.
asign width: 100%; height: auto; to the img so it adjust proportionally to its parent.
Here you have it in a snippet. Hope it helps.
<div class="item">
<div class="image-wrapper">
<img
src=
"https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg"/>
</div>
<p>some paragraph</p>
</div>
<style>
.item{
display:flex;
}
.image-wrapper {
width: 25%; /* means 25% of .item */
}
img{
width: 100%; /* means 100% of its parent .image-wrapper */
height: auto;
}
</style>
It happens because, per default the tag <img>is inline. You need to change it to block or flex
I have a series of full-screen divs in Visual Composer and I want an arrow at the bottom of each one indicating to users they should scroll for more content. I tried absolute positioning on the divs containing the icon with no luck. All I've done is move the icon a few pixels to th
<section class="l-section wpb_row height_full valign_center width_full with_img" id="home">
<div class="l-section-img loaded" data-img-width="1920" data-img-height="809">
</div>
<div class="l-section-h i-cf">
<div class="g-cols vc_row type_default valign_top">
<div class="vc_col-sm-12 wpb_column vc_column_container">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="w-image align_center" id="mainlogo">
<div class="w-image-h"><img src="logo.png" class="attachment-full size-full">
</div>
</div>
<div class="ult-just-icon-wrapper">
<div class="align-icon" style="text-align:center;">
<a class="aio-tooltip" href="#whatis">
<div class="aio-icon none " style="display:inline-block;">
<i class="Defaults-chevron-down"></i>
</div>
</a>
</div></div></div></div></div></div></div>
</section>
Existing CSS:
.aio-icon.none {
display: inline-block;
}
.aio-tooltip {
display: inline-block;
width: auto;
max-width: 100%;
}
.vc_column-inner {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
}
.wpb_column {
position: relative;
}
.vc_column_container {
display: flex;
flex-direction: column;
}
.vc_row {
position: relative;
}
.l-section-h {
position: relative;
margin: 0 auto;
width: 100%;
}
The icon itself is the Defaults-chevron-down.
Do you have an idea how to position that icon properly?
I also struggled a little with this. But there is a rather quick and dirty fix for this:
Just put another row below the full height row. Place your icon there and give this element a top margin of i.e. -200px.
For some strange reason the rather logical approach to put the icon in the full height row itself and to position it absolute to the bottom is not properly supported by the source generated from WPB.
I had this issue this week. The way I resolved it was added the icon in that row/section (in my case a single image element with a custom link to a .svg) and added a class to it.
The CSS for the class was then:
position:absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
margin-top:-30px;
(I added a negative margin top as I noticed the icon was cutting of a little on my Google Pixel phone with the fixed bottom bar so that pulled it up a little.)
I'm using Twitter Bootstrap and I'm trying to create a grid with centered rows of three span3 divs.
I have tried to achieve this by wrapping the three span3s in a centered span9, but that doesn't seem to work.
My problem is that the divs don't center correctly and as I'm new to HTML and CSS I would really need some help. Thanks!
HTML
<div class="row">
<div class="span9 center">
<div class="span3">
<p>THUMBNAIL1</p>
</div>
<div class="span3">
<p>THUMBNAIL2</p>
</div>
<div class="span3">
<p>THUMBNAIL3</p>
</div>
</div>
</div>
etc.
CSS:
.center {
float: none;
margin-left: auto;
margin-right: auto;
align: center;
}
Instead of using:
align: center;
Use:
text-align: center;
align is not a css rule though I guess that you got it from the syntax of align as an attribute on the tag
You could also put them inside and element with position relative and then inside have them with:
position: absolute;
left: 50%;
transform: (0, 50%);
You can also use this:
.span3 {
display: inline-block;
clear: both;
}
.span9 {
text-align: center;
}
Fiddle Demo
<div id="parent" style="height:250px;width:250px;display:inline">
<div id="child" style="height:100%;width:100%;z-index:10001"></div>
<select style="height:100%;width:100%;z-index:10000"><option/></select>
</div>
My requirement is to include the select and child div elements inside the parent div in such a way that the child div is on top of the select element and completely covers it. Later I want to hide the child div based on an event and make the select element visible.
Both child div and select elements should occupy the entire size of parent div each on their own.
how can I achieve this?
http://jsfiddle.net/dyBjZ/2
#parent {
position: relative;
overflow: auto;
}
.child {
position: absolute;
height:100%;
width:100%;
}
<div id="parent">
<div class="child">
<select>
<option>One</option>
<option>Two</option>
</select>
</div>
<div class="child" id="child">Click me</div>
</div>
Taking input from the comments above, I was able to solve my problem. Here is what I did. Posting it here in case someone else lands up on this page searching.
<div id="parent" style="height:250px;width:250px">
<div id="child" style="display:block;height:100%;width:100%"></div>
<div id="selectParent" style="display:none;height:100%;width:100%">
<select><option/></select>
<div>
</div>
Based on the javascript event, I toggle display from block to none for child div. And toggle display from none to block in selectParent.
First issue is to give the #parent div a size, thus remove display: inline from its style.
Next, you could toggle for both elements from display: none to display: block, and v.v. But to reduce this by half, you could use absolute positioning which takes the element out of the default markup layout, as shown in this example.
HTML:
<div id="parent">
<div id="child"></div>
<select></select>
</div>
CSS:
#parent {
height: 250px;
width: 250px;
position: relative;
}
#child {
position: absolute;
background: #aaa;
height: 100%;
width: 100%;
}
select {
height: 100%;
width: 100%;
}
#child.hidden {
display: none;
}
I'm using the jQuery Cycle plugin to rotate images in a slideshow type fashion. That works fine. The problem I'm having is getting these images (of different sizes) to center in the containing div. The images are inside a slidshow div that has it's position set to absolute by the Cycle plugin.
I've tried setting line-height/vertical-align and whatnot but no dice. Here is the relevant HTML and CSS
HTML:
<div id="projects">
<div class="gallery">
<span class="span1">◄</span><span class="span2">►</span>
<div class="slideshow">
<img src="images/img1.png" />
<img src="images/img1.png" />
<img src="images/img1.png" />
</div>
</div>
</div>
CSS:
#main #home-column-2 #projects
{
width: 330px;
background: #fefff5;
height: 405px;
padding: 12px;
}
#main #home-column-2 #projects .gallery
{
width: 328px;
height: 363px;
position: relative;
background: url('images/bg-home-gallery.jpg');
}
#main #home-column-2 #projects .gallery img
{
position: relative;
z-index: 10;
}
And in case you want to see it, the jQuery:
$('#home-column-2 #projects .gallery .slideshow').cycle(
{
fx: 'scrollHorz',
timeout: 0,
next: "#home-column-2 #projects .gallery span.span2",
prev: "#home-column-2 #projects .gallery span.span1"
});
Any ideas on getting these images to center?
Try this:
http://www.brunildo.org/test/img_center.html
Vertical centering is a pain! Here's what the W3C page says about the vertical center:
CSS level 2 doesn't have a property
for centering things vertically. There
will probably be one in CSS level 3.
But even in CSS2 you can center blocks
vertically, by combining a few
properties. The trick is to specify
that the outer block is to be
formatted as a table cell, because the
contents of a table cell can be
centered vertically.
This method involves a little jquery, but works fantastic in most situations...
let me explain:
if all the images of the slideshow are contained within their own element div pos:absolute and those images are pos:relative, then on a $(window).load() you can run a .each() and find each img in the slideshow and adjust it's top positioning to be offset a certain number of pixels from the top..
jcycle automatically sets each parent div containing the image to pos:absolute on every onafter() so it's useless to apply this pos adjustment to them... instead target each img you have set to pos:relative...
Here is the example:
$(window).load(function() {
// move all slides to the middle of the slideshow stage
var slideshowHeight = 600; //this can dynamic or hard-coded
$('.slideImg').each(function(index) {
var thisHeight = $(this).innerHeight();
var vertAdj = ((slideshowHeight - thisHeight) / 2);
$(this).css('top', vertAdj);
});
});
and this is the html it's working on...
<div class="slideshow" style="position: relative; ">
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery -->
</div>
</div>
just make sure
.slideImg {
position:relative;
}
I think that's everything... I have an example, but it's on a dev site.. so this link might not last.. but you can take a look at it here:
http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html
The positions are relative according to the style sheet, so did you try setting them to display: block and margin-top: auto; margin-bottom: auto; ?
Another option is to align them manually in javascript based on the containing div's height.
You need to nest two divs inside each cycle item. The first must have the display: inline-table; and the second must have display: table-cell; both these divs have vertical-align: middle.
So the structure would look something like this:
<div class="slide-container">
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
</div>
With the following css:
.slide-container {
height: 300px;
}
.outer-container {
height: 300px;
display: inline-table;
vertical-align: middle;
}
.inner-container{
vertical-align: middle;
display: table-cell;
}
You can see it working here http://jsfiddle.net/alsweeet/H9ZSf/6/