Position Icon and Text using CSS

Question

I have the following code.

HTML

var pdfLink = xml.text(wiki.api(uri.build(site.api, ['pages', string.cast(page.id)])), '/page/contents.alt/@href');
var pdfWithChildren = pdfLink .. "?stylesheet=default&deep=true&showtoc=true";
var pdfWithoutChildren = pdfLink .. "?stylesheet=default&deep=false";
<div id="pdf-book">
//<a href=(pdfWithoutChildren) rel="nofollow" target="_blank" title="Export page and child pages as a PDF"><span class="mt-icon-article-pdf"></span></a>
<a href=(pdfWithChildren) rel="nofollow" target="_blank" title="Export page and child pages as a PDF"><span class="mt-icon-book pdf"><br/>"Click to Download PDF"</span></a>;
//<span class="mt-icon-page-notification off"></span>
</div>

CSS

.mt-icon-book.pdf  {
    font-size: 1em;
    position: relative;
    top: -100px;
    left: -50px;

}
#pdf-book {
    display: block;
    float: left;
    position: relative;
    }

.columbia-article-topic #pdf-book {
    margin-top: .25em;
    margin-left:.75em;
}
.columbia-article-topic-guide #pdf-book {
    margin-top: .25em;
    margin-left:.6em;
}

The output is as follows:

Expected Output:

Any help would be appreciated. Thanks in advance.

Latest Output:

You should combine the snippets into one or else the CSS won't apply to anything. — guitarzero, Feb 14 '19 at 07:57
Maybe adding `white-space: nowrap` to your text style, fix your problem — Alizadeh118, Feb 14 '19 at 08:02
Possible duplicate of [Vertically align text next to an image?](https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) — Rob, Feb 14 '19 at 11:41

karthickj25 · Accepted Answer · 2019-02-14T10:08:05.887

Use text-align:center; to center the contents within the parent div

.mt-icon-book.pdf  {
    font-size: 1em;
    position: relative;
    white-space: nowrap;

}
#pdf-book {
    display: block;
    float: left;
    position: relative;
    text-align:center;
    }
    
.columbia-article-topic #pdf-book {
    margin-top: .25em;
    margin-left:.75em;
}
.columbia-article-topic-guide #pdf-book {
    margin-top: .25em;
    margin-left:.6em;
}

<div id="pdf-book">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAfxJREFUOI3lVL9rU1EYPd9386PWivQZB138gZNDSPLyQh1CqFVQ3FzVxUWcRP8Exy5qwUFBHBQdoiAddLISiJVnEyO16qSLgjrkBz77onnv3c/BFmL7XkiLmwfucM8937nf+S5c4B+DNlP05Wh6a7KbnCSgO15deNp/xpsxTPQS+0C0R0DHh+qwVCrFHMdJi6i/LvQS/GnJtr81i4VrLDIrRAUwPhuVl3dWNbEww46zfJGYlwDx+vm4F1zK5KwAjFmtaYQgooVr/ZpQQyJSr2sLT1b3zWLhHKDfTLm0CIZ72JGTc2P8DETVVMV+31871AyJJAWiIgHqR7t9gxReHHH8Q0bFrq7VDvcomsZB9BHav71tu3EBGqNgBdM0R9dKQyOvA6MFQfpVo/GAgGkAyObzZ3qsDADuhgw7ExNGoLUpwM9W0brVBL1TzI8mv/sSlm9g5FbROqUTwWMBTRtjrbMMuksku7XW56NqIjtsl6yMaJwQkSupqm2v0HMrC9ls/vSGDH0v/oH51/Ud1frzQSmGNtw5P+9kclY6k8tPAfABdITRZaGD2ldX/1DrMXCGDEkS4y0zlhXJIgG7RPA1FvPa0TVhECEA6MXV/Uat9lD7/j0RcXuuO9Mdid+s1+suVPg/EEpms9YxMEwBgqhOCNhyYP/ey+VyOVLzn+A3tn67ZEGpkboAAAAASUVORK5CYII=" rel="nofollow" target="_blank" title="Export page and child pages as a PDF" />
<a rel="nofollow" target="_blank" title="Export page and child pages as a PDF"><span class="mt-icon-book pdf"><br/>"Click to Download PDF"</span></a>

</div>

Thanks for your help.I added your changes and the output is looking fine, but the word "Download" and the word "PDF" is on different line. Can I get it on one line? Also I have removed the words "Click To". Latest image attached above — Pankaj Morajkar, Feb 14 '19 at 09:30
Thanks. I've updated the snippet to use ` white-space: nowrap;` . This will make the text all in single line — karthickj25, Feb 14 '19 at 10:09

score 0 · Answer 2 · answered Feb 14 '19 at 08:22

Try the below simplified code. I have added the minimum height for columbia-article-topic class to visible the container in your live code remove the min-height:300px. I hope this will be helpful.

.columbia-article-topic {
    position: relative;
    min-height: 300px; /*optional */
}
.mt-icon-book.pdf  {
    font-size: 1em;
    position: relative;
}
#pdf-book {
 position: absolute;
 right: 15px;
 bottom: 15px;
} 
#pdf-book a {
    font-size: 18px;
    color: #000;
    text-decoration: none;
}
#pdf-book img {
    display: block;
    text-align: center;
    margin: 0 auto;
}

<div class="columbia-article-topic">
    <div id="pdf-book">
        <img src="https://www.freeiconspng.com/uploads/book-icon--icon-search-engine-6.png" width="15">
        <span class="mt-icon-book pdf"></span>
        <a href=(pdfWithChildren) rel="nofollow" target="_blank" title="Export page and child pages as a PDF">"Click to Download PDF"</a>
    </div>
</div>

Position Icon and Text using CSS

2 Answers2