时间戳

首页 > 解决方案 > 如何在单独的div中将容器内的链接居中

html - 如何在单独的div中将容器内的链接居中

问题描述

使用 Bootstrap (col/row) 时，当我想在一行/col 中创建单独的部分时，我总是会犯错误。

Youtube 链接即使在同一个容器中也不会移动到中心。谁能帮我？谢谢！

<div id="music" class="container-fluid">
    <div class="row justify-content-center">
        <div class="col">
            <a href="https://www.youtube.com/watch?v=Z0lufcRgZlA&ab_channel=BoBMArleySong1">
                <img class="yt" src="https://cdn.pixabay.com/photo/2017/02/01/08/56/social-2029117_960_720.png" alt="song.mp3">
                <span class="d-block">Natural Mystic</span>
            </a>
        </div>
        <div class="col">
            <a href="https://www.youtube.com/watch?v=M4EZ8kpX3Os&ab_channel=AmazingDucker">
                <img class="yt" src="https://cdn.pixabay.com/photo/2017/02/01/08/56/social-2029117_960_720.png" alt="song.mp3">
                <span class="d-block">Three Little Birds</span>
            </a>
        </div>
        <div class="col">
            <a href="https://www.youtube.com/watch?v=CHekNnySAfM&ab_channel=ReggaeLife">
                <img class="yt" src="https://cdn.pixabay.com/photo/2017/02/01/08/56/social-2029117_960_720.png" alt="song.mp3">
                <span class="d-block">Is This Love</span>
            </a>
        </div>
    </div>
</div>

标签： htmlcsstwitter-bootstrap

解决方案

如果您希望文本居中，请务必使用类对齐文本

澄清一点：如果您需要在容器内居中块，则需要justify-content: center在容器上使用。由于这仅适用于组合，因此display: flex我还d-flex向列添加了类，因为在引导程序中默认情况下列不是弹性元素。

一行已经有了display: flex，所以没有必要为d-flex它设置类。

如果你想在一个块内居中文本，你可以通过text-align: center

img {max-width: 200px}
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.css">
<div id="music" class="container-fluid">
    <div class="row ">
        <div class="col d-flex justify-content-center">
            <a href="https://www.youtube.com/watch?v=Z0lufcRgZlA&ab_channel=BoBMArleySong1" class="text-center">
                <img class="yt" src="https://cdn.pixabay.com/photo/2017/02/01/08/56/social-2029117_960_720.png" alt="song.mp3">
                <span class="d-block">Natural Mystic</span>
            </a>
        </div>
        <div class="col d-flex justify-content-center">
            <a href="https://www.youtube.com/watch?v=M4EZ8kpX3Os&ab_channel=AmazingDucker" class="text-center">
                <img class="yt" src="https://cdn.pixabay.com/photo/2017/02/01/08/56/social-2029117_960_720.png" alt="song.mp3">
                <span class="d-block">Three Little Birds</span>
            </a>
        </div>
        <div class="col d-flex justify-content-center">
            <a href="https://www.youtube.com/watch?v=CHekNnySAfM&ab_channel=ReggaeLife" class="text-center">
                <img class="yt" src="https://cdn.pixabay.com/photo/2017/02/01/08/56/social-2029117_960_720.png" alt="song.mp3">
                <span class="d-block">Is This Love</span>
            </a>
        </div>
    </div>
</div>

推荐阅读