使用CSS定位图标和文本

Question

我有以下代码。

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;
}

输出如下：

预期输出：

任何帮助将不胜感激。预先感谢。

最新输出：

Answer 1

使用text-align:center;将内容放在父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>

Answer 2

尝试以下简化代码。我为columbia-article-topic类添加了最小高度，以便在实时代码中可见该容器，并删除min-height:300px。我希望这会有所帮助。

.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>