Question

我的按钮有问题。我希望我的按钮分为两个，每个50％。

例如，在我的小提琴中，我有一个blue按钮，其中包含文字Use和icon1

Use和icon1各应为50%，并且相对于blue按钮垂直和水平对齐，由于某些原因我不能这样做。

红色按钮也一样。

解决方案：Fiddle

        <div class='gc_footer_use_nix'>
            <div class='gc_footer_nix'>
                <div class="gc_footer_button_wrapper">                        
                    <div class='gc_footer_nix_txt'>Nix</div>
                    <div class='gc_footer_nix_icon'>icon2</div>                       
                </div>    
            </div>                 
            <div class='gc_footer_use'>
                <div class="gc_footer_button_wrapper">
                    <div class='gc_footer_use_txt'>Use</div>
                    <div class='gc_footer_use_icon'>icon1</div>
                </div>     
            </div>               
        </div>

CSS：

    .gc_footter_use_nix{
        text-align: right;
        display: table-cell;
        vertical-align: middle;             
        width: 50%;     


    }

    .gc_footer_use{
        display: table-cell;             
        vertical-align: middle; 
        background-color: #3F6EB6;  
        padding:5px 30px 5px 30px;
        border-radius: 3px;
        float: right;
        margin-right: 10px;
    }

    .gc_footer_use_txt{
        float: left;
        display: table-cell;            
        vertical-align: middle;                 
        color: white;
        font-size: 1.5em;
        width: 50%;
        margin: auto;

    }   

    .gc_footer_use_icon{
        text-align: right;
        display: table-cell;
        vertical-align: middle;                 
        width: 50%;
        margin: auto;           


    }           

    .gc_footer_nix{
        display: table-cell;
        vertical-align: middle;                 
        background-color: #D61920;
        padding:5px 30px 5px 30px;
        border-radius: 3px;
        color: white;
        font-size: 1.5em;
        float: right;
        border: 0px solid green;

    }

    .gc_footer_nix_txt{
        float: left;
        display: table-cell;
        vertical-align: middle;                 
        position: relative;   
        border: 0px solid blue;
    }   

    .gc_footer_nix_icon{
        float: right;
        display: table-cell;
        vertical-align: middle;                 
        position: relative;
        border: 0px solid yellow;


    }

    .gc_footer_button_wrapper{
        display: table;
        width: 100%;
        position: relative;
    }

Answer 1

尝试 ~~this fiddle~~ this fiddle。

我改变了这些规则：

.gc_footer_use {
    display: table-cell;
    vertical-align: middle;
    background-color: #3F6EB6;
    border-radius: 3px;
    float: right;
    margin-right: 10px;
}

.gc_footer_button_wrapper {
    display: table;
    box-sizing: border-box;
    width: 100%;
}

.gc_footer_use_txt {
    display: table-cell;
    vertical-align: middle;
    color: white;
    font-size: 1.5em;
    padding: 5px 30px 5px 5px;
}

.gc_footer_use_icon{
    text-align: right;
    display: table-cell;
    vertical-align: middle;                 
    padding: 5px 5px 3px 5px;  
}

说明

我让gc_footer_button_wrapper类使用table显示，并且与其父容器box-sizing: border-box; width: 100%;一样宽。然后我让它的孩子成为垂直中间对齐的桌子细胞。

我还从float和gc_footer_use_txt类中移除了gc_footer_use_icon规则，因为我的技术是不必要的。

最后，我将填充规则移到了gc_footer_button_wrapper。这些衬垫可以根据您的需要进行定制。有人甚至可以删除它们。

您可以对其他按钮使用相同的技术。

CSS两个元素各50％，每个元素垂直和水平对齐

1 个答案:

说明