I have 2 images that I want to show side by side, with the title above as part of a hyperlink.
<div id="image">
<a href="file:///L:/file" style="text-decoration:none;" Title="Project Reports">
<p>New Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;" />
</a>
<a href="file:///L:/file2" style="text-decoration:none;" >
<p>Project Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;"/>
</a>
If I remove the p tag around the titles, it displays inline, but I need the title to be on top of the image.
CSS:
#image {
display: inline-block;
float: left;
}
Here. Proper HTML and CSS.
a {
display: inline-block;
text-decoration: none;
}
<div id="image">
<a href="file:///L:/file" title="Project Reports">New Reports<br>
<img src="http://tableau/" style="width:304px;height:228px;" />
</a>
<a href="file:///L:/file2">Project Reports<br>
<img src="http://tableau/" style="width:304px;height:228px;"/>
</a>
</div>
add float:left; in a
#image {
display: inline-block;
width:1000px;
clear:both;
}
#image > a{
float: left;
display:inline-block;
}
<div id="image">
<a href="file:///L:/file" style="text-decoration:none;" Title="Project Reports">
<p>New Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;" />
</a>
<a href="file:///L:/file2" style="text-decoration:none;" >
<p>Project Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;"/>
</a>
Related
I'm trying to centre two buttons but having no luck!
It also has a header image above the buttons within the HTML.
Here's my current HTML:
HTML:
<div>
<img src=".jpg" style="width:700px;display:block;margin-left:auto;margin-right:auto;" alt=""><div class="nav3" style="height:705px;">
<span class="icons"><a href="https://twitter.com/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</span>
<a href="https://www.amazon.co.uk/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</div>
I revised your code and separate it the inline style from your html code.
div {
text-align: center;
width: 700px;
}
div img{
width:700px;
margin-bottom: 20px;
}
.nav3 img {
width: 100px;
display: inline;
}
<div>
<img src="http://placehold.it/700x260" alt="">
<div class="nav3">
<img src="http://placehold.it/640x260" alt="">
<img src="http://placehold.it/640x260" alt="">
</div>
</div>
Currently, I set the width of div to width: 700px; and the place holder also contains the same width. Modify these width to suit your needs.
I have a few wrapped images in my HTML file:
<div id="banners">
<div id="friend">
<a target="_blank" href="http://www.google.com">
<img src="../assets/images/friends/friend_1_256.png" alt="TEST 1" width="200" height="200">
</a>
</div>
<div id="friend">
<a target="_blank" href="https://www.google.com">
<img src="../assets/images/friends/friend_2_512x157.png" alt="TEST 2" width="400" height="123">
</a>
</div>
</div>
I want to display these images in a row. I have tried solutions such as float: left or display: inline-block but none of them works. Is it possible to display wrapped images inline?
It should work. Try something like this.
#friend {
display: inline-block;
border: 1px solid red; /*Just to highlight */
width:200px; /*Set width according to parent id banners*/
text-align:center /*center image*/
}
<div id="banners">
<div id="friend">
<a target="_blank" href="http://www.google.com">
<img src="https://i.stack.imgur.com/kMcaV.jpg?s=328&g=1" alt="TEST 1" width="200" height="200">
</a>
</div>
<div id="friend">
<a target="_blank" href="https://www.google.com">
<img src="https://i.stack.imgur.com/kMcaV.jpg?s=328&g=1" alt="TEST 2" width="400" height="123">
</a>
</div>
</div>
Try this out, it worked for me, hope it will resolve your issue as well
#friend{display:table-cell;}
The text representing each image is currently located to the right of the image. I want the text to be centered underneath its corresponding image, how do I achieve this?
Please note that I applied display: inline-bock on the list items, so they are in a row.
#footer1 {
float: left;
width: 100%;
border: 10px solid #e3e3e3;
}
#footer1>ul>li {
padding: 0 8px;
display: inline-block;
}
#footer1 a:hover img {
border: 1px solid #5cadff;
text-decoration: none;
box-shadow: 5px 5px 2px 2px #5cadff;
}
#footer1 img {
border: 1px solid transparent;
margin-left: 110px;
}
<div id="footer1">
<h2> SOURCES </h2>
<ul>
<li>
<a href="https://www.wikipedea.com" title="wikipedia">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
w
</li>
<li>
<a href="https://www.google.com" title="google">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Google
</li>
<li>
<a href="https://www.youtube.com" title="youtube">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Youtube
</li>
<li>
<a href="https://www.nlm.nih.gov/" title="Nih.gov">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Nih
</li>
<li>
<a href="https://www.medindia.net" title="MedIndia.net">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
MedIndia
</li>
</ul>
</div>
I was able to do this without any changes to your existing HTML by doing this:
li{
display:inline-block;
text-align:center;
width:70px;
}
li img{
margin:0 10px;
}
The text-align centers all text and child elements inside the li. The width needs to be large enough that no caption will be too large to fit in that width. (If a caption won't fit in the allotted width, then the centering is wrecked.)
I added the left and right margin to the image for a little bit of future-proofing in case you later want to include a very short caption in your list. With that margin, even a very short caption will be forced to the next line (instead of next to the image) since 50 px image width + 10 margin on each side leaves no room for text.
Edited for float, keeps these inline and overflows if doesn't fit on page.
<style>
.container {
clear: both;
}
ul li {
width: 50px;
float: left;
text-align: center
}
ul li a {
text-decoration: none;
}
</style>
<div class="container">
<ul>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
</ul>
</div>
Please try this
HTML:
<div id="footer1">
<h2> SOURCES </h2>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
</div>
CSS:
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
DEMO
How do we center horizontally inside a div an image that we want to be clickable?
HTML:
<div class="logo-wrap">
<img class="logo" src="img/logo.png" width="262" height="53" />
</div>
CSS:
.logo-wrap{
text-align: center;
}
img.logo {
margin-left: auto;
margin-right: auto;
}
I need to put the "a" tag somewhere and give it a proper CSS. Any idea?
My personal preference is to manage it all with css providing more control.
DEMO
HTML
<div class="logo-wrap">
<a class="logo"/>
</div>
CSS
.logo-wrap{
text-align: center;
}
.logo {
background:#68c url('img/logo.png') no-repeat center center;
margin:0 auto;
height:53px;
width:262px;
display:block;
cursor:pointer;
}
<div class="logo-wrap">
<img src="img/logo.png" width="262" height="53" />
</div>
Well, just add an Anchor-Tag around it:
<div class="logo-wrap">
<a href="#">
<img class="logo" src="img/logo.png" width="262" height="53" />
</a>
</div>
JSFiddle
html
<div class="logo-wrap">
<a href="#">
<img class="logo" src="img/logo.png" />
</a>
</div>
css
.logo-wrap{
width:100%;
}
.logo{
width:50%;
display:block;
margin:0 auto;
}
Try this:
img.logo {
vertical-align: middle
}
I have something like this:
<li>
<div class="">
<a href="http://www.youtube.com/watch?v=1111" target="_blank">
<img src="http://img.youtube.com/vi/1111/default.jpg" />
</a><a href="http://www.youtube.com/watch?v=1111" target="_blank">
<h6>abcd</h6>
</a>
<p>
1234 views
</p>
</div>
</li>
//multiple li like above inside ul
i'm trying to achieve the effect like in related videos on youtube, with an image on the left, and the text appearing to the right of the image (and not flowing under the image) - how can it be done?
eg:
thanks
Floats and margins can be your friend here. For example:
<style type="text/css">
.videoitem {
height:90px;
margin-bottom:15px;
}
.image {
float:left;
margin-right:10px;
}
</style>
<div class="videoitem">
<a href="http://www.youtube.com/watch?v=1111" target="_blank">
<img class="image" src="http://img.youtube.com/vi/1111/default.jpg" />
</a><a href="http://www.youtube.com/watch?v=1111" target="_blank">
<h6>abcd</h6>
</a>
<p>
1234 views
</p>
</div>
<div class="videoitem">
<a href="http://www.youtube.com/watch?v=1111" target="_blank">
<img class="image" src="http://img.youtube.com/vi/1111/default.jpg" />
</a><a href="http://www.youtube.com/watch?v=1111" target="_blank">
<h6>abcd</h6>
</a>
<p>
1234 views
</p>
</div>