I want to make the grey images center aligned. Please guide me how can I do this.
Here is what I have tried:
<div id="responsivearea" style="margin-top: 50px;">
<div class="img-center">
<img style="clear:none;" class="size-thumbnail wp-image-2707" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/visa-logo2-150x150.jpg" alt="visa logo" width="150" height="150" />
<img style="clear:none;" class="size-thumbnail wp-image-2705" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/nethope-logo1-150x150.jpg" alt="nethope logo" width="150" height="150" />
<img style="clear:none;" class="size-thumbnail wp-image-2704" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/ILO-logo1-150x150.jpg" alt="ILO logo" width="150" height="150" />
</div>
</div>
Here is the site.
Simply use:
.img-center{text-align: center;}
As suggested already, magin auto... using your existing img-center class
.img-center{
margin:auto;
vertical-align:middle; /* If you mean vertically aligned */
}
text-align can work but is a little funny in cross browser support...
margin auto generally does the job and should work
otherwise just wrap them with center tags, while people may frown upon using center tags..THEY WORK CROSS BROWSER!! so they will NOT fail!
Otherwise, if you mean the footer images/logos on the site.. They are in a P tag without any class.. You can simply apply a text-align:center: to that p tag.
Set margin to auto. The browser will align the images to center for you
img {
margin: auto;
}
Related
I have rows of product thumbnails with the product text below. See here
Since the images have different heights the text is not always vertically aligned in the right place. I just changed the layout from tables to divs because it's easier and more modern.
I've worked through several examples, websites, and this site but still haven't found a way to align this correctly. I'd like the image aligned in the middle of the div and the text at the very bottom.
Here's the DIV code (very simple):
<div style="float:left; width:210px; height:200px; text-align:center;" >
<a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/"><img alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" /></a>
Alton Banquette
</div>
It works fine on this page since the images are all the same height
Is there a simple solution to this? I like DIVS better but this wasn't a problem when everything was table cells since I could use valign=center, etc.
Thank you!
Always assign a class and organize your code , always wrap your text to avoid glitches:
<div class="wrap" >
<a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/">
<img alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" />
</a>
<p>Alton Banquette</p>
</div>
.wrap
{
float:left; width:210px; height:200px; text-align:center;
}
}
.wrap p
{
display:block;
}
img
{
height:100% !important;
width:auto;
}
Fiddle Demo
so whenever you change the image height , text will always remain at bottom.
I have this markup:
<div class="girls" style="text-align:center; margin-top:100px">
<img src="images/1.png" />
<img src="images/2.png" />
<img src="images/3.png" />
<img src="images/4.png" />
and this css (I'm using Twitter Bootstrap) :
img {
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
The images have equal width and height and are displayed inline.
On my resolution are ok, fit the entire width (1366px), but on lower resolutions the images don't fit.
So, I need to keep the proportions on every screen resolution ( lower than 1366px in my case)
I've found this picturefill
Which I think is helpful for me, but I'm thinking that it's a simpler solution for my case because I have 4 images which I need to display them horizontally and make them scale on every resolution.
Thanks!
You can set the style width attribute of the images to 25%, without specifying height. That's gonna work if you're always putting 4 images, they have the same width between them and your container div is always at 100%.
HTH
Francisco
If you are using Twitter Bootstrap, then use markup properly like in Twitter Bootstrap documentation:
<div class="row-fluid">
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div>
http://jsfiddle.net/zNLBG/
Here is the code:
<div class="crop">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt="image2.jpg" />
</div>
.crop{
float:left;
margin:2px;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
width:320px;
height:240px;
}
.crop img{
position:absolute;
top:-0px;
left:-0px;
}
I'm guessing I need to add something to my CSS? I know a solution would be to put the images as separate divs like this:
<div class="crop">
<img src="image1.jpg" alt="image1.jpg" />
</div>
<div class="crop">
<img src="image2.jpg" alt="image2.jpg" />
</div>
But I have next/previous arrows in my gallery so I need the images to be in the same div otherwise the arrows won't work.
I think the reason they are both appearing in the same place is because they are sharing the same css class, just name them differently with different top/left coordinates.
What I am trying to do is be able to have two columns in a div. So I can insert a picture at any point, and place text long side it neatly.
Here is my html:
<div id="content">
<div id="gallery">
<h1>Gallery</h1>
<div id="container">
<div id="imageleft">
<img src="images/pic1.jpg" width="150px" alt="Image" />
</div>
<div id="imageright">
test
</div>
</div>
<img src="images/pic2.jpg" width="150px" alt="Image" />
<img src="images/pic3.jpg" width="150px" alt="Image" />
<img src="images/pic4.jpg" width="150px" alt="Image" />
</div>
</div>
Here is a perfect working JSFiddle
http://jsfiddle.net/RdyGM/1/
And here is an image of what I actually see. The purple bit should be 50% of left. (The text "test" is placed below).
upon inspection you can see that it is obtaining its width from else where :#
How to use just my desired css.
Well, there are two things you could do. The general approach is to try to make your CSS selector more specific. So you could do: #gallery #content #imageleft, instead of just #imageleft, and that should make your rule apply. The other approach is to change your CSS #imageleft to say:
#imageleft{
....
width:50% !important;
....
}
You can use !important to tell the browser which CSS to prioritise - it might, or might not help...
#imageleft {
float:left;
width:50% !important;
background:#c9c;
}
#imageright {
float:right;
width:50% !important;
background:#9c9;
}
domId.Attributes.Add("property of css", "Your css class name");
Does anyone know if it is possible to display a group of inline images horizontally in a row (or any element at that), allowing the group to extend beyond the right edge of the screen, without triggering the horizontal scrollbar?
A quick example:
<div class="page_container" style="width:900px; position:relative">
<div class="image_set">
<img src="xxx.jpg" alt="" width="200" height="400" />
<img src="xxx.jpg" alt="" width="200" height="400" />
<img src="xxx.jpg" alt="" width="200" height="400" />
<img src="xxx.jpg" alt="" width="200" height="400" />
...etc
</div>
</div>
The catch is that the image_set div that I would like to extend to, or beyond the right edge of the browser, is contained in a 900px div. The image_set needs to extend outside of its container, and to, or past the edge of the browser window.. without triggering a scrollbar.
The 900px wide page_container element needs to interact normally with the browser window (triggering scrollbars), and the element must contain the images. However, the images must be allowed to flow off the right edge of the browser window (visually)
So I'm wondering if there is a way to accomplish this with css only, without javascript?
Just make the container div have a fixed width and then give it the overflow: hidden proprty. So something like:
<div class="image_set" style="width:100%; overflow: hidden;">
<img src="xxx.jpg" alt="" width="200" height="400" />
<img src="xxx.jpg" alt="" width="200" height="400" />
<img src="xxx.jpg" alt="" width="200" height="400" />
<img src="xxx.jpg" alt="" width="200" height="400" />
</div>
By default overflow is auto which will apply scroll bars when needed thus setting it to hidden will mean that anything which does break the container will just disappear without needing scrollbars, and since for you that is the edge of the window, the effect will be complete.
In order to have the containing div cover the width of the entire page, you must first alter its layout model from block (which determines its width via its parent div) to absolute or fixed.
With the property position: absolute a div is positioned relative to its first parent with a relative position, this is usually the window itself, thus you can make the container div for the filmstrip use this property:
<div class="image_set" style="position: absolute; width:100%; overflow: hidden;">
</div>
So basically what you want to prevent is a double scroll bar?
try:
<div class="image_set" style="width:100%;position: relative;">
Here ya go: http://jsfiddle.net/Vppxp/
CSS
#filmstrip {
border-bottom: solid 5px rgb(220,220,220);
border-top: solid 5px rgb(220,220,220);
overflow-x: auto;
padding: 5px 0;
white-space: nowrap;
}
#filmstrip .cell {
background: rgb(220,220,220);
display: inline-block;
height: 100px;
width: 100px;
}
#filmstrip .cell + .cell {
margin-left: 1px;
}
HTML
<div id="filmstrip">
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
</div>