I have the following html..
<div class="container animate" data-animation="pulse">
<div class="margin30 "></div>
<h2 class="border-title">Powering payments for <span></span></h2>
<div class="margin25"></div>
<div style="display:table-cell;">
<div>
<img src="images/clientlogos/pappa.png" title="" width="170" height="88" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/offergrid.png" title="" width="215" height="55" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/index.png" title="" width="121" height="33" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/fudr.png" title="" width="156" height="65" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/inloc8.png" title="" width="139" height="39" style="margin-left:5px;">
</div>
</div>
</div>
Can someone tell how could I arrange all the divs having images in a horizontal line.I want all the images in one line
div, img {
float: left;
display: inline-block;
}
float: left on your divs is one option:
http://jsfiddle.net/c3DV3/
Since you are only storing images in your div, you should check if it's better for you to use the <img> tag or to set them as a background-image, as stated in this post. It mainly depends on what you are going to do with those images. Check the link for further informations.
Floating the divs on left like others already said is the proper way to do it. You could also use display:inline-block; (even if divs are rendered as blocks by default).
Personally I didn't get if you wanted just to display them on one line, or to align them on top: in this case, you can use vertical-align:top; in addition to the other CSS parameters to achieve the result.
Related
I am trying to have three columns aligned so that they are all the right side. Here is what I have so far: https://prnt.sc/o5284n
And here is how this is supposed to work: https://prnt.sc/o528y3
I have managed to solve this problem by applying margin to the sides of the images, but this gets really messed as the web page gets smaller.
I have looked into many other option such as float and column gap but this doesn't work for me in this case
<section id="bottom">
<img src="Appify.png" alt="app" width="310" height="200" class="pad">
<p class="twenty_f">APPIFY</p>
<img src="sunflower.jpeg" alt="flower" width="310" height="200" class="pad">
<p class="twenty_f">SUNFLOWER</p>
<img src="bokeh.jpeg" alt="bokeh" width="310" height="200" class="pad">
<p class="twenty_f">BOKEH</p>
</section>
I think what you are looking for flexbox handles perfectly.
That being said. The problem you are running into is that you don't have a max-width on your bottom-section.
Try adding:
section#bottom {
max-width: 1000px;
text-align: center;
}
This will allow your items to be closer together without stretching out too far.
What I suggest though is using the flexbox method. Another thing is you should wrap your images and related text into a div that contains them together. It gives you better responsive control in the end.
I have given you an example that I quickly did on codepen.
Link to example
Why don't go with flexbox approach. Try this:
#bottom {
display: flex;
justify-content: space-around;
}
#bottom div {
text-align: center;
margin-right: 10px;
}
<section id="bottom">
<div>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="app" width="310" height="200" class="pad">
<p class="twenty_f">APPIFY</p>
</div>
<div>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="flower" width="310" height="200" class="pad">
<p class="twenty_f">SUNFLOWER</p>
</div>
<div>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="bokeh" width="310" height="200" class="pad">
<p class="twenty_f">BOKEH</p>
</div>
</section>
Refer: https://www.w3schools.com/css/css3_flexbox.asp
Hope it helps. Cheers!
I've been trying to get a hyper link to be centered above a picture. I tried using a div class tag to center it, but they won't allow pixels.
HOMEPAGE <img src="1.jpg width="300" height="300" />
This is what it looks like after I run it:
I want the hyperlink to line up in the middle of the picture.
If you add a text-align: center to the container element you will get what you want:
<div style="text-align: center;">
HOMEPAGE<br />
<img src="https://dummyimage.com/150x100/s7e/ffe" width="300" height="300" />
</div>
A Container Approach with CSS
CSS:
.imagecontainer {
width:300px;
text-align:center;
}
HTML
<div class="imagecontainer">
<a href="link">
Some text
</a>
<img src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Domestic_goat_kid_in_capeweed.jpg" width=300/>
</div>
JSfiddle
Try using the element DIV, setting the width to 300 pixels just like your image and CSS to align the link to center:
<div>
<div style="width: 300px; text-align: center"> HOMEPAGE </div>
<div><img src="1.jpg width="300" height="300" /></div>
</div>
I want to show this four images without any margin. How to do this?
Each A,B,C,D look like one image.
A
B
C
D
<div align="center">
<img src="a.png">
<br/>
<img src="b.png">
<br/>
<img src="c.png">
<br/>
<img src="d.png">
</div>
I tried css margin=0 and style padding =0 but it is not working.
Update---
<img id="ImgEmotion" src="a.png" width="40" border="0">
<img src="b.png" width="20" height="20" border="0">
If I use css, I know there are no margin.
If I use #no_margin, how can I apply to img tag? Also I need the 'id='ImgEmotion'.
CSS:
img
{
margin:0;
display:block
}
HTML:
<div align="center">
<img src="a.png">
<img src="b.png">
<img src="c.png">
<img src="d.png">
</div>
JSFIDDLE
I have a list of icons to be displayed. I am using the following layout to do this:
<div class="icons">
<div class="icon1">
img src="someimage" <p>Some test </p>
</div>
.
.
.
</div>
This is the CSS I am using:
.icons{
margin-top:5px;
margin-left:5px;
left:0;
}
.icon1{
line-height:15px;
margin-top:8px;
width:75px;
}
How do I modify this so that if I add more divs with the class icon1 they will be aligned in a new column when the max-height is reached?
I am unsure whether float:left will work. In my experience this causes the div tags to be added side by side and once they reach the end of the parent div the next one will be added to the bottom of the first column. He requires the opposite #Jack
what i suggest is using jquery to check if the height of your div tags are exceeding the parent div. If they are then add a new div and begin appending your image-div tags to the new div with style="float:left". Thus if your initial DOM contains
< div class="icons" > < /div >
appending one element should change the DOM to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
</div>
</div>
appending another element should change it to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
</div>
appending a third element which exceeds the parent div would change the DOM to this
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
<div class ="column" style="float:left">
<div class="icon3" > <img src="" height="" width="" /> </div>
</div>
</div>
You can do this with CSS 'multi-columns',
demo
but it is still a Candidate Recommendation, so the support is still very minimal even though you can use vendor prefixes to get it working(although not without some quirks) on the latest versions of Firefox, Chrome and Opera.
Here's the rendered html:
<div style="padding-left: 50px; vertical-align: middle;">
<strong>NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
general css:
div {
font-size:smaller;
padding:5px 5px 0 0;
float:left;
}
Here's what the design looks like in firebug:
I would like the text NONE to align at the top, just the way the image (checkbox) is aligned. Any ideas on how to do this with css?
vertical-align: middle doesn't do what you think it does.
<div style="padding-left: 50px;">
<strong style="float: left;">NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
Couple of things:
Since you know the height of your image, to get the exact alignment you want, try setting a line-height. You can set it at 15px or 1 (just 1, no unit), and see which you prefer.
Change your value for vertical-align. It's meant to control the vertical alignment of two inline (or inline-block) items next to each other. Which is what you have when you have strong next to img, it's just that middle doesn't look the way you want. Other values that work reasonably well cross-browser are baseline, top, bottom and sometimes text-top or text-bottom.
Beyond that, you can set both the img and the strong to block and use float, height, and padding.
Examples:
<div style="padding-left: 50px; line-height: 15px;">
<strong>NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
<div style="padding-left: 50px; vertical-align: top;">
<strong>NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
Others have already down an example with floats.
The issue is that the line height on the top is going to conform to however high your image is. To compensate, you can put the "none" text in a block element, and then set your alignment in there. Here would be an example:
<div style="padding-left: 50px; vertical-align: middle;">
<div style="height:15px; width:50px; float:left;">NONE</div>
<img style="height:15px; width:15px; float:left;" src="images/Checked.gif" alt="" />
<br style="clear:both;" />
<span style="font-size:larger;">DEFAULT</span>
</div>
From here you can play with the padding and alignment within that div around the none text.
These answers didn't work for me, here's how I got it working...
<div style="line-height:0px;">
<span style="vertical-align:middle;">test</span>
<img src="myimage.png" style="vertical-align:middle;" />
</div>
give the container element (in my example, the <div>) element a line-height attribute value of 0px; then everything you want on the line should have a vertical-align:middle; style applied.
Tested in Chrome, FF, IE7+...