Question

我一直在徒劳地尝试在引导网格内将引导缩略图垂直和水平居中对齐。我发现所有与非缩略图实例有关的堆栈溢出帖子，因此对您有所帮助。

这是所需的输出：

之前

之后：

和代码：

<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>

    <div class="container">
        <br><br>
        <div class="row">
            <div class="col-sm-3">
                <div class="thumbnail" style="max-width:150px"> 
                    <img class="img-responsive img-hover" src="http://uforest.org/images_thumb/macrolenes_echinulata.jpg" alt="">
                    <div class="caption h_caption" style="padding-top:5px;padding-bottom:5px;">
                        <span><strong id="species_cm">Spiny Macrolenes</strong></span><br>
                        <span style="font-style: italic; margin-bottom: 10px;">Macrolenes echinulata</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-9" style="height: 400px;"> 
                <p>... is the largest greenery stakeholder in ..., and has over the years planted 
                    and maintained many trees under their professional care, and are enjoyed by Singaporeans and visitors alike. 
                    It is worth looking at how the most popular trees managed by ... has changed over the years, and
                    the reasons behind them. Besides, all of these trees have dominated our landscape for 
                    more than 30 years; it is about time to get acquainted with them more intimately.
                    </p>
                    <p>Some species remain popular through decades. This includes the Rain Tree (<i>Albizia saman</i>),
                    Yellow Flame (<i>Peltophorum pterocarpum</i></a>), Broad-Leaf Mahogany (<i>Swietenia macrophylla</i>), 
                    Sea Apple (<i>Syzygium grande</i>), and Senegal Mahogany (<i>Khaya senegalensis</i>). 
                    The Rose Trumpet (<i>Tabebuia rosea</i>) saw a climb in rankings over the years, 
                    likely due to the well-received seasonal mass blooming of pink flowers.</p>
                    <p>There were others that only made in the ranking once, but lost their shine due to maintenance or safety issues.
                    The most drastic of all is the Acacia (<i>Acacia auriculiformis</i>), which is top in the leaderboard in 1988,
                    but was completely abandoned since it generated a lot of leaf litter, and likely because of its ininvasive nature. 
                    The Angsana (<i>Pterocarpus indicus</i>) just barely managed to scrape by, after falling from 7th place to among the last.
                    </p>
                    <p>... has constantly adapt and improve our urban greenery. An anecdotal view of the current state is the
                    introduction of more and new native species. Trees like the Sea Gutta (<i>Planchonella obovata</i>) has probably reach within the top 10,
                    looking at the massive numbers planted along our streets. However, it will be hard to surplant the iconic exotics, 
                    like the Rain Tree of American origin. Ultimately, many factors come into play in deciding the cultivated greenery landscape,
                    and only time (and data) will tell.
                    </p>
            </div>
</div>

    </div>

</body>

引导网格中的居中对齐（水平和垂直）引导缩略图

0 个答案: