Question

我正在为我的网站使用左侧边栏，我想在侧边栏中显示图像，标题上方是标题文本，下方是一些信息文本。我试图使这两个文本元素始终位于图像的上方/下方。有人可以帮我吗？我的工作代码如下：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel='icon' href='{{ icon }}' type='image/x-icon' />
    <title>{{ pageTitle }}</title>

    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <!-- bootstrap css-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

</head>

<style>
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

body {
    font-family: 'Poppins', sans-serif;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

.btn-info {
    color: #fff;
    background-color: #b81717;
    border-color: #52b817;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    /* background: rgb(11, 223, 212); */
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    margin-left:11px
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    /*  NAVBAR BACKGROUND */
    background: #63c23e; 
    color: rgb(0, 0, 0);
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    display: inline-flex;
    padding: 20px;
    /* background: #6d7fcc; */
    position: relative;
    width: 100%;
}

#sidebar ul.components {
    /* padding: 20px 0; */
    /* border-bottom: 1px solid #47748b; */
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------age page colors------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        color: pink
        display: inline;
    }
}

#imageModal{
    z-index:3;
}

/* Sidebar expand/collapse button */
#sidebarCollapse{
    position: fixed;
    z-index: 2;
    
    margin-left: 84%;
    box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
    border: none;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
}

/* Bottom of sidebar image stuff */
.responsive {
    width: 90%;
    bottom:20px;
    margin-left:5%;
    margin-right:5%;
}

/* color image title */
#colorsTitle{
    font-size:15px;
    margin-left: 29%;
}

/* color image text formatting */
#pageColorsText{
    font-size:15px;
    line-height: 1.6;
    /*
    margin-left: 29%;
    */
}

.imageDetails{
display: inline-block;
}

.imageDetailsText{
text-align: center;
}

</style>

<nav id="sidebar">

        <div id="sidebarTop" class="sidebar-header">
            <h3 style="text-size:22px">website title</h3> <button id="sidebarCollapse"><img src="https://img.icons8.com/ios-filled/24/000000/menu.png"></button> <!-- id='sidebutton' -->
        </div>

        <ul class="list-unstyled components sideBarOption">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#projectsSubmenu" data-toggle="collapse" class="dropdown-toggle ">Projects</a>
                <ul class="collapse list-unstyled show " id="projectsSubmenu">
                    
                    <li>
                        <a href="#">website.biz</a>
                    </li>
                    <li>
                        <a href="#">more projects</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#contactSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Contact</a>
                <ul class="collapse list-unstyled" id="contactSubmenu">
                    <li>
                        <a href="#">Email</a>
                    </li>
                    <li>
                        <a href="#">Github</a>
                    </li>
                    <li>
                        <a href="#">LinkedIn</a>
                    </li>
                    <li>
                        <a href="#">Resume</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#blogSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Blog</a>
                <ul class="collapse list-unstyled" id="blogSubmenu">
                    <li>
                        <a href="#">Post 1</a>
                    </li>
                    <li>
                        <a href="#">Post 3</a>
                    </li>
                    <li>
                        <a href="#">Post 4</a>
                    </li>
                    <li>
                        <a href="#">Post 5</a>
                    </li>
                </ul>
            </li>
        </ul>

        <div class="sidebar-footer imageDetails">
            <a class="imageDetailsText">Image page colors</a><br>
            <!-- img 1 -->
            <img id="colorImageDisplay" style="display: block;" class="responsive" alt="image alt descr" src="https://m.media-amazon.com/images/M/MV5BNTcyZWMzMTgtZmM0ZC00NzM2LWEzNjEtYTJhMTgzYmI1MDllXkEyXkFqcGdeQXVyMjUyNDk2ODc@._V1_.jpg">
            <!-- img 2 
            <img id="colorImageDisplay" style="display: block;" class="responsive" alt="image alt descr" src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/cloud/altocumulus.jpg"> -->
            
            
            
            <div id="pageColorsText">
                <a id="color1Hex">Color 1: #657856</a><br>
                <a id="color2Hex">Color 2: #657856</a><br>
                <a id="color3Hex">Color 3: #657856</a><br>
                <a id="color4Hex">Color 4: #657856</a><br>
                <a id="color5Hex">Color 5: #657856</a>
            </div>
        </div>

    </nav>

我尝试添加

.imageDetails{
display: inline-block;
}

.imageDetailsText{
text-align: center;
}

基于类似的问题，我在网上找到了，但没有运气。谢谢

Answer 1

这将使链接位于图像上方和下方。

.sidebar-footer a {
    display: block;
    text-align: center;
}

a元素的宽度与其自身的文本一样宽，因此当您在其上放置显示块时，它不能居中，它会占用所有空间，因此可以居中。

动态图像上方和下方的html中心文本

1 个答案: