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>
Related
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.
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
EDIT: This might make more sense, check this image. http://puu.sh/rt8M
The image just goes through the padding. I want the title div to expand vertically to accommodate the image. While keeping the text centered and the center of the image should intersect the line the text is on.
I want to align an img to the left (and then another after the text to the right). I've tried various properties but none seem to do it right. Can anyone help?
To clarify, I want the image against the left side of the screen or browser window. The div stretches from the left to the right of screen, as you would expect of a header/title div.
Float;left seems to make the img drop out of the div tag. I should mention there is a text-align:center; property on the tag. But it doesn't fix the problem when removed so I'm not sure it's that.
The HTML
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" width="86" height="98" />
Page Header Title
</h1>
</div>
</div>
I created a little dabblet code example for you. I think this is what you are trying to do?
http://dabblet.com/gist/2492793
CSS:
.logo{
float:left;
width: 86px;
height:98px;
display:block;
}
.img2{
float:right;
display:block;
}
.clear{
clear:both;
}
HTML:
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" />
Page Header Title
<img class="img2" src="images/img2.png" alt="" />
<div class="clear"></div>
</h1>
</div>
</div>
The reason the logo is dropping out of the div is because it is not cleared.
This should fix things up.
Use this
<div id="header" style="float:left">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" width="86" height="98" />
Page Header Title
</h1>
</div>
#logo{
display: flex;
justify-content: space-evenly;
}
<div id="logo">
<img src="https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="something" width="100" height="100"/>
<h1>Hello World</h1>
</div>
I want to display several images next to each other and each image has a date below it. The date is wider than the image and I would like to center the image on top of the date. Here's a code snippet
<div style="float:left">
<div class="newsfeed_photo">
<a href="...">
<img alt="Small" class="photo_thumb_frame" src="..." />
</a></div>
<div class="newsfeed_date">
(08/17/11 03:29pm)
</div>
</div>
<div style="float:left">
<div class="newsfeed_photo">
<a href="...">
<img alt="Small" class="photo_thumb_frame" src="..." />
</a></div>
<div class="newsfeed_date">
(08/22/11 02:16pm)
</div>
</div>
If I'm understanding you right, you should just be able to use text-align: center:
http://jsfiddle.net/rahjU/
To shift your image Before other content (visually)
.img {
order: -1;
}
W3
I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image. However, now I have no idea how to do this. How is this accomplished?
Your HTML:
<div class="img-with-text">
<img src="yourimage.jpg" alt="sometext" />
<p>Some text</p>
</div>
If you know the width of your image, your CSS:
.img-with-text {
text-align: justify;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
Otherwise your text below the image will free-flow. To prevent this, just set a width to your container.
You can use HTML5 <figcaption>:
<figure>
<img src="img.jpg" alt="my img"/>
<figcaption> Your text </figcaption>
</figure>
Working example.
In order to be able to justify the text, you need to know the width of the image. You can just use the normal width of the image, or use a different width, but IE 6 might get cranky at you and not scale.
Here's what you need:
<style type="text/css">
#container { width: 100px; //whatever width you want }
#image {width: 100%; //fill up whole div }
#text { text-align: justify; }
</style>
<div id="container">
<img src="" id="image" />
<p id="text">oooh look! text!</p>
</div>
This centers the "A" below the image:
<div style="text-align:center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" />
<br />
A
</div>
That is ASP.Net and it would render the HTML as:
<div style="text-align:center">
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" />
<br />
A
</div>
I am not an expert in HTML but here is what worked for me:
<div class="img-with-text-below">
<img src="your-image.jpg" alt="alt-text" />
<p><center>Your text</center></p>
</div>