时间戳

首页 > 解决方案 > 一些元素不使用 Bootstrap 居中

html - 一些元素不使用 Bootstrap 居中

问题描述

我正在研究将在我正在构建的网站的一个页面中使用的项目。我已经成功构建了该项目，但我希望它在页面中居中并且我只能将图像居中，其余文本根本不会移动。

HTML 代码：

        <article class="col-sm text-center">

            <a href="https://www.google.com/">
                <img style="border-radius: 5px;" width="400" height="561" src="https://i.imgur.com/kE1WrzV.png" alt="Image" loading="lazy" />
            </a>

            <div style="margin-top: 2%;" class="container-fluid">
                <div class="row center-block">
                    <h6 class="style-anime-title"><a class="style-anime-a" href="{{ request.path }}{{obj.mNameEN}}">This is a test (Some more test)</a></h6>
                </div>

                <div class="row center-block" style="max-width:80%;">                           
                    
                    <div>    
                        <a href="/category/{{ cat.mCategoryName }}" class="style-anime-option style-anime-a">Category 1</a>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i>
                        <a href="/category/{{ cat.mCategoryName }}" class="style-anime-option style-anime-a">Category 2</a>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i>
                        <a href="/category/{{ cat.mCategoryName }}" class="style-anime-option style-anime-a">Category 3</a>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i>
                        <a href="/category" class="style-anime-option style-anime-a">...</a>
                </div>

                    <div>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i><span class="style-anime-option">12 items</span>
                    </div>
                                                                               
                </div>

            </div>

        </article>

    </div>

CSS：

.style-anime-title {
    font-family: Montserrat !important;
    text-align: center !important;
}

.style-anime-a {
    text-decoration: none !important;
    color: #3E3E3E !important;
    transition: all .3s !important;
}

.style-anime-option {
    color: #7d7d7d !important;
}

.style-bullets {
    font-size: 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 5px;
    margin-right: 5px;
}

标签： htmlcssbootstrap-4

解决方案

我用以下代码解决了这个问题：

HTML：

<article class="col-sm text-center">

    <a href="https://www.google.com/">
        <img style="border-radius: 5px;" width="400" height="561" src="https://i.imgur.com/kE1WrzV.png" alt="Image" loading="lazy" />
            </a>

        <div style="margin-top: 2%;" class="container-fluid">
            <div class="row">
                <h6 class="style-anime-title"><a class="style-anime-a" href="{{ request.path }}{{obj.mNameEN}}">This is
                        a test (Some more test)</a></h6>
            </div>

            <div class="row">

                <div class="col-sm">
                    <div>
                        <a href="/category/{{ cat.mCategoryName }}" class="style-anime-option style-anime-a">Category 1</a>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i>
                        <a href="/category/{{ cat.mCategoryName }}" class="style-anime-option style-anime-a">Category 2</a>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i>
                        <a href="/category/{{ cat.mCategoryName }}" class="style-anime-option style-anime-a">Category 3</a>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i>
                        <a href="/category" class="style-anime-option style-anime-a">...</a>
                    </div>

                    <div>
                        <span class="style-anime-option">12 items</span>
                    </div>
                </div>
            </div>

        </div>

</article>

CSS：

.style-anime-title {
    font-family: Montserrat !important;
    text-align: center !important;
    margin: auto !important;
}

推荐阅读