CODEWITHSUNDEEP
htmlcss
Sackling
Sackling

Reputation: 1820

moving text below image with css only

I am using a widget on my site that I do not have access to the main code.

However I can style it to my liking with css. I am trying to move the text below the image but I can't seem to get it.

here is the html:

<div class="dd-widget dd-box dd-top-fundraisers dd-widget-complete" data-type="topFundraisers" data-event-id="503">
    <h1> Top Fundraisers</h1>
    <ul>
        <li><a class="dd-avatar-link" href=""><img src="img.jpg" scale="0"><span class="tf-full-name">person name</span></a></li>
        <li><a class="dd-avatar-link" href=""><img src="img.jpg" scale="0"><span class="tf-full-name">person name</span></a></li>
        <li><a class="dd-avatar-link" href=""><img src="img.jpg" scale="0"><span class="tf-full-name">person name</span></a></li>
        <a class="dd-view-more-link btn" href=""> View More</a>
    </ul>
</div>

I have added my own css to the list to make it display inline. as I want the images to display horizontally. Now however the span class with the person name is displayed next to the image. 

div.dd-widget li {display:inline;}

My goal is to have it underneath the image. I was trying to experiment with adding a line space through css but don't think that is the right way to go about it.

Upvotes: 0

Views: 2090

Answers (4)

piers
piers

Reputation: 181

The <span> tag is by default inline, as is <img>. However, by making your images display: block; they will occupy the full width of ur list items, making ur <span> tags jump down.

This is achieved with:

div.dd-widget li img {
   display: block;
}

As pointed out by AndrewTet, this will make your list items appear under each other. To fix this simply set their display attribute to inline-block:

div.dd-widget li {
   display: inline-block;
}

Upvotes: 1

Varun Chakervarti
Varun Chakervarti

Reputation: 1042

Update your CSS with this one.

div.dd-widget li {
    display: inline;
    float: left;
}
div.dd-widget li img{
    display: block;
}

This will move the text below image with images displayed horizontally. Here is the JSFiddle link. Demo

Upvotes: 0

chrisgonzalez
chrisgonzalez

Reputation: 4213

Super basic solution:

CSS (make more specific as you need):

li {
    display: inline-block;
    vertical-align: top;
}

li img {
    display: block;
}

This allows your <li> tags to flow horizontally, while the img contained within will display as block, causing any following elements to flow below on the page.

Upvotes: 0

AndrewTet
AndrewTet

Reputation: 1182

Change the css to this.

div.dd-widget li {display:inline-block;}
div.dd-widget img {display:block;}

Codepen: http://codepen.io/supah_frank/pen/VYYXLK

Upvotes: 0

Related Questions