html динамически центрировать текст над и под изображением - PullRequest
Новая
       3

html динамически центрировать текст над и под изображением

0 голосов
/ 13 июля 2020

Я работаю над левой боковой панелью своего веб-сайта, я хочу отображать изображение на боковой панели с текстом заголовка над ним и некоторым информационным текстом под ним. Я пытаюсь сделать так, чтобы оба этих текстовых элемента всегда располагались по центру над / под изображением. Может кто-нибудь помочь мне с этим, пожалуйста? Мой рабочий код ниже: 

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

На основании похожих вопросов, которые я нашел в Интернете, но безуспешно. Спасибо

1 Ответ

0 голосов
/ 13 июля 2020

Это будет центрировать ссылки над и под изображением. 

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

Ширина элемента a была такой же шириной, как и сам текст, поэтому его нельзя было центрировать, когда вы помещаете на него блок отображения использует все пространство, чтобы его можно было центрировать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...