текст не центрируется по вертикали - PullRequest
Новая
       60

текст не центрируется по вертикали

0 голосов
/ 28 мая 2020

Я пытаюсь создать интерактивные плитки (прямоугольные) на панели инструментов.

Проблема 1: Я пробовал использовать flexbox, но вертикальное выравнивание у меня не сработало. поэтому я попытался использовать padding-top. Я ищу, чтобы плитки имели вертикально центрированные значки и текст, которые также должны поддерживаться отзывчиво (Bootstrap Используется). 

div.wrapper{
    height:150px;
    padding:20px;
    padding-top:30%;
    border:1px solid black;
    margin:auto;
    text-align:center
}

Использование padding-top не работает отзывчиво. При уменьшении ширины экрана из плитки выходит текст и значок. Использование line-height , равного высоте поля, выводит многострочный текст go за пределы плитки.

Проблема 2: для полного плитка интерактивна, я попытался использовать display: block в моем теге привязки, когда он находился внутри div 

<div class="col-md-2 button-col">
<div class="wrapper">
    <i class="fa fa-gear fa-2x"></i>
    <br><br>
    <a href="<?php echo base_url(); ?>listitems" class="mybutton">Manage Items</a>
</div>
</div>

css: 

a.mybutton{
    font-weight:bold;
    text-decoration:none;
    font-family:Arial;
    display: block;
}

но полная плитка не стал кликабельным. Поэтому я разместил тег привязки за пределами div.

Вот мой нынешний макет: 

<div class="container">
<div class="row">
    <div class="col-md-2 button-col">
        <a href="<?php echo base_url(); ?>listitems" class="mybutton">
            <div class="wrapper">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                Click for Production Calculation Chart
            </div>
        </a>
    </div>
    <div class="col-md-2 button-col">
        <a href="<?php echo base_url(); ?>listitems" class="mybutton">
            <div class="wrapper">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                Production Calculation Chart
            </div>
        </a>
    </div>
    <div class="col-md-2 button-col">
        <a href="<?php echo base_url(); ?>listitems" class="mybutton">
            <div class="wrapper">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                Tile Number 3
            </div>
        </a>
    </div>
    <div class="col-md-2 button-col">
        <a href="<?php echo base_url(); ?>listitems" class="mybutton">
            <div class="wrapper">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                This is Tile 4
            </div>
        </a>
    </div>
    <div class="col-md-2 button-col">
        <a href="<?php echo base_url(); ?>listitems" class="mybutton">
            <div class="wrapper">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                Tile 5
            </div>
        </a>
    </div>
    <div class="col-md-2 button-col">
        <a href="<?php echo base_url(); ?>listitems" class="mybutton">
            <div class="wrapper">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                Tile 6 Text
            </div>
        </a>
    </div>
   <!-- And Many More Tiles Will Come and make more rows -->
</div>
</div>

Вот мой текущий css: 

div.button-col{
    padding:2rem;
}
div.wrapper{
    height:150px;
    padding:20px;
    border:1px solid black;
    margin:auto;
    text-align:center
}
div.wrapper:hover{
    background-color:blue;
    cursor: pointer
}
div.wrapper i.fa{
    color:#438EB9;
}
div.wrapper:hover i.fa {
    color:white;
} 
a.mybutton{
    font-weight:bold;
    text-decoration:none;
    font-family:Arial;
}
a.mybutton:hover
{
    color:white;
}

Ответы [ 3 ]

0 голосов
/ 28 мая 2020

Можете попробовать: 

<!DOCTYPE html>
<html>
<head>

<script src='js/fontawesome-all.min.js'></script>

<style>

    div.button-col{
        height:150px;
        line-height: 150px;
        width: 100%;
        margin: 20px auto;
        text-align:center;
    }

    a.mybutton{
        width: 90%;
        display:inline-block;
        padding: 20px;
        line-height: 20px;
        border:1px solid black;
        font-weight:bold;
        text-decoration:none;
        cursor: pointer;
    }

    a.mybutton:hover {
        background-color:blue;
        color:white;
    }

</style>
</head>
<body>

    <div class="container">
    <div class="row">
        <div class="col-md-2 button-col">
            <a href="my_url" class="mybutton">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                Click for Production Calculation Chart
            </a>
        </div>
    </div>
    </div>

</body>
</html>
0 голосов
/ 28 мая 2020

Наконец-то решение, которое идеально сработало для меня. Подскажите, пожалуйста, лучшее ли это решение? или мы можем сделать что-нибудь получше 

.button-col{
            display: table;
            width: 100%;
            height: 150px; /* for demo only */
            border: 1px solid black;
            margin-bottom:20px;
        }
        .centeralign{                
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .contentouter{
            width:100%;
            height:100%;
            display: inline-block;
            vertical-align: top;
        }
        div.button-col:hover, div.button-col:hover a{
            background-color:blue;
            color:white;
        }
        .icon{
            margin-top:30px;
            margin-bottom:10px;
        }
        .content
        {
            display: table;
            width: 100%;
            height: 70px;
        }
        .contentinner{                
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        a.my-button
        {
            font-weight:bold;
            text-decoration:none;
        }

HTML: 

<div class="col col-sm-2 button-wrapper">
                <a href="my_url" class="my-button">
                    <div class="button-col">
                        <div class="centeralign">
                            <div class="contentouter">
                                <div class="icon">
                                    <i class="fa fa-gear fa-2x"></i>
                                </div>
                                <div class="content">
                                    <div class="contentinner">
                                        Items
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col col-sm-2 button-wrapper">
                <a href="my_url" class="my-button">
                    <div class="button-col">
                        <div class="centeralign">
                            <div class="contentouter">
                                <div class="icon">
                                    <i class="fa fa-gear fa-2x"></i>
                                </div>
                                <div class="content">
                                    <div class="contentinner">
                                        Click for Production Calculation Chart
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
0 голосов
/ 28 мая 2020

Ответ на Проблема 1 : попробуйте установить стиль для элемента ссылки 'a' и вместо этого удалить ручное позиционирование и пользовательское свойство vertical-align: 

div.wrapper{
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}

div.wrapper a{
    display: inline-block;
    vertical-align: middle;
}

Я также удалил <br> из HTML: 

<div class="col-md-2 button-col">
<div class="wrapper">
    <i class="fa fa-gear fa-2x"></i>

    <a href="<?php echo base_url(); ?>listitems" class="mybutton">Manage Items</a>
</div>
</div>

Если вы все еще хотите, чтобы <i> и <a> каждый устанавливали в своих собственных строках, тогда оберните <i> с <div> и это должен быть центрирован по вертикали и горизонтали.

Обратите внимание, что для работы по центру по вертикали требуется соответствующий тип дисплея, например inline-block.

Посмотреть в действии https://jsfiddle.net/74wg2za6/

Ответ на Проблема 2 Чтобы сделать всю плитку доступной для кликов, просто оберните весь свой div-оболочку <a> вместо того, чтобы делать текст «Управление элементами» только кликабельным, см. Его здесь

https://jsfiddle.net/kr45qoa1/

Я просто использовал тег <a>, чтобы обернуть все <div>, <i> и текст.

Надеюсь, это то, что вы ищем.

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

Похожие темы

...