按钮中心布局

【问题标题】：Button center layout按钮中心布局
【发布时间】：2021-08-06 20:58:40
【问题描述】：

有一个网站

    $(document).ready(function() {
        $('.header__button').click(function(event){
                $('.header__button').removeClass('lilac');
                $(this).addClass('lilac');
                event.target.style.color='#ffffff';
        }
        );

const getItem = `<div class="cardexample">
                            <div class="mobileimage">
                                    <img class="mobiles" src="../img/mobileimage.png">
                            </div>
                            <div class="content__title">
                                Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
                            </div>
                            <div class="video__icon">
                                <span>
                                    <button class="crashvideo">Краш видео</button>
                                </span>
                                <span>
                                    <a href="#"><img class="youtube__icon-play" src="../img/Vector.png"></a>
                                </span> 
                                <span>
                                    <button class="crashvideo" id="ex2">Краш видео</button>
                                </span>                         
                            </div>
                            <div class="content__text">
                                Видео разбор с ответами на самые часто задаваемые вопросы может быть большим в 3 строки, видео разбор с ответами на самые часто задаваемые
                            </div>
                            <div class="endlink">
                                <a href="#">Читать далее</a>
                            </div>              
                        </div>
                        `;  



        if  (document.documentElement.clientWidth<640)
        {
            
            const getAllItems = () => {
                let content = '';
                
                for (let i=0; i<4; i++) {
                    content+=getItem;
                }
                return content;
            }       

            const renderAllItems = () => {
                document.getElementById('content').innerHTML=getAllItems();
            }

            renderAllItems();
            console.log('Mobile');
            
        }
        
        
        if ((window.innerWidth>=640) && (window.innerWidth<=1023))
        {
            let blocks = document.querySelectorAll('.content__article');
            
            for (let block of blocks)
            {
                block.innerHTML=getItem;
            }
            
            console.log('Tablet');
            
        
        }
        
        if (document.documentElement.clientWidth > 1023)
        {
            console.log('Desktop');
        }
    
    }
    
    
    )
body {
    margin: 0;
    padding: 0;
}

:root {
    --containerfullwidth: 768;
}
.globalcontainer {
    margin-top: 0px;
    margin-right: calc((39/var(--containerfullwidth)*100)*1%);
    margin-bottom: 0px;
    margin-left: calc((39/var(--containerfullwidth)*100)*1%);
}

.header > .header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;

font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */


color: #000000;
}

.header__button {
    width: 75px;
    height: 30px;
    border-radius: 4px;
    border-color: #5f3ec0;
    background-color: #fff;
    margin-right: 1.75%;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.header__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7px 15px 7px 0px;
    overflow: hidden;
    /*margin-right: 10%;*/
}

.content {
    width: 100%;
}

.cardexample {
    width: 100%;
}

.mobileimage img{
    max-width: 100%;
    height: auto;
}

.mobiles {
    max-width: 100%;
}

.content__title {
    font-family: TTNorms-Medium;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 21.6px;
    
    margin: 0.3% 15px 0 15px;
}

.crashvideo {
    width: 115px;
    height: 30px;
    border-radius: 4px;
    margin-top: 15px;
    
    background-color: #5f3ec0;
    color: #ffffff;
}

.video__icon {
    margin-left: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#ex2 {
    display: none;
}

.youtube__icon-play {
    margin-left: auto;
    margin-right: auto;

    margin-top: 20.5px;
    width: 25px;
    height: 18.75px;
    
    align: center;
}

.content__text {
    margin-top: 16px;
    text-align: left;
    margin-left: 15px;
    margin-right: 90px;
    
    font-family: TT Norms;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 150%;
    /* or 22px */


    /* Main text */

    color: #cacaca;
}

.endlink {
    margin-top: 20px;
    margin-left: 15px;
    margin-bottom: 20px;
    
    font-family: TT Norms;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 100%;
    color: #121212;
}

a {
    text-decoration: none;
}

.endlink a {
    color: #121212;
}

.endlink a:visited {
    color: #800080;
}

.show__more {
    width: 345px;
    height: 50px;
    
    padding: 40px auto 40px auto;
    border-radius: 6px;
    
    background-color: #5f3ec0;
    color: #ffffff;
}


.content {
    display: grid;
    grid-template-areas: 'content__parttext content__parttext'
                        'content__parttext content__parttext'
                        'content__parttext content__parttext'
                        'content__parttext content__parttext';
    grid-template-columns: 50% 50%;
}

.content__article {
    grid-area: 'content__parttext';
}
<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="globalcontainer">
                <div class="header">
                        <div class="header__text">
                            Обзоры
                        </div>
                        <div class="header__buttons">
                            <!-- <span> -->
                                <button class="header__button">Все</button>
                                <button class="header__button">Видео</button>               
                                <button class="header__button">Текст</button>               
                                <button class="header__button">Обзоры</button>
                                <button class="header__button">Сравнения</button>
                                <button class="header__button">Краш видео</button>
                                <button class="header__button">Распаковка</button>
                            <!-- </span> -->
                        </div>
                </div>      
                <div class="content" id="content">
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                </div>              
                </div>              
                <button class="show__more">Показать еще</button>
        <!-- </div> -->
        <div class="footer">
                <div class="logo__company">
                </div>
                <div class="contacts">
                    <div class="contacts__title">
                        Контакты
                    </div>
                    <div class="contacts__telephones">
                        <div class="telephone1">
                        +7 (800) 333 32 24
                        </div>
                        <div class="telephone2">
                        +7 (812) 448 68 11
                        </div>
                    </div>
                    <button class="requestcall">
                        Заказать звонок
                    </button>
                </div>
                <div class="internetshop">
                        <div class="internetshop__title">
                            Интернет магазин
                        </div>
                        <div class="disclosure__arrow">
                            >
                        </div>
                </div>
                <div class="company">
                        <div class="company__title">
                            Компания
                        </div>
                        <div class="disclosure__arrow">
                            >
                        </div>
                </div>
                <div class="help__to__the__buyer">
                        <div class="help__to__the__buyer__title">
                            Помощь покупателю
                        </div>
                        <div class="disclosure__arrow">
                            >
                        </div>                  
                </div>
                <div class="socialnetworks__links">
                        <div class="socialnetworks__links__title">
                            Мы в соц. сетях
                        </div>
                        <div class="socialnetworks__links-images">
                            <div class="facebook-image">
                                <embed src="../img/facebook.svg">
                            </div>
                        </div>
                </div>
                <div class="allrights">
                        <div class="allrights__text">
                            © 2020 Все права защищены
                        </div>
                </div>
        </div>          
    </div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>

显示如下

告诉我如何实现元素.show__more的正确显示。应显示为https://www.figma.com/file/noqP1gzhrAlGAErPNBgknp/test?node-id=1%3A783（平板电脑版）

【问题讨论】：

    标签： javascript html jquery css layout


    【解决方案1】：

    display: block; margin: auto; 应该可以解决问题：

    $(document).ready(function() {
        $('.header__button').click(function(event){
                $('.header__button').removeClass('lilac');
                $(this).addClass('lilac');
                event.target.style.color='#ffffff';
        }
        );

const getItem = `<div class="cardexample">
                            <div class="mobileimage">
                                    <img class="mobiles" src="../img/mobileimage.png">
                            </div>
                            <div class="content__title">
                                Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
                            </div>
                            <div class="video__icon">
                                <span>
                                    <button class="crashvideo">Краш видео</button>
                                </span>
                                <span>
                                    <a href="#"><img class="youtube__icon-play" src="../img/Vector.png"></a>
                                </span> 
                                <span>
                                    <button class="crashvideo" id="ex2">Краш видео</button>
                                </span>                         
                            </div>
                            <div class="content__text">
                                Видео разбор с ответами на самые часто задаваемые вопросы может быть большим в 3 строки, видео разбор с ответами на самые часто задаваемые
                            </div>
                            <div class="endlink">
                                <a href="#">Читать далее</a>
                            </div>              
                        </div>
                        `;  



        if  (document.documentElement.clientWidth<640)
        {
            
            const getAllItems = () => {
                let content = '';
                
                for (let i=0; i<4; i++) {
                    content+=getItem;
                }
                return content;
            }       

            const renderAllItems = () => {
                document.getElementById('content').innerHTML=getAllItems();
            }

            renderAllItems();
            console.log('Mobile');
            
        }
        
        
        if ((window.innerWidth>=640) && (window.innerWidth<=1023))
        {
            let blocks = document.querySelectorAll('.content__article');
            
            for (let block of blocks)
            {
                block.innerHTML=getItem;
            }
            
            console.log('Tablet');
            
        
        }
        
        if (document.documentElement.clientWidth > 1023)
        {
            console.log('Desktop');
        }
    
    }
    
    
    )
    body {
    margin: 0;
    padding: 0;
}

:root {
    --containerfullwidth: 768;
}
.globalcontainer {
    margin-top: 0px;
    margin-right: calc((39/var(--containerfullwidth)*100)*1%);
    margin-bottom: 0px;
    margin-left: calc((39/var(--containerfullwidth)*100)*1%);
}

.header > .header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;

font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */


color: #000000;
}

.header__button {
    width: 75px;
    height: 30px;
    border-radius: 4px;
    border-color: #5f3ec0;
    background-color: #fff;
    margin-right: 1.75%;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.header__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7px 15px 7px 0px;
    overflow: hidden;
    /*margin-right: 10%;*/
}

.content {
    width: 100%;
}

.cardexample {
    width: 100%;
}

.mobileimage img{
    max-width: 100%;
    height: auto;
}

.mobiles {
    max-width: 100%;
}

.content__title {
    font-family: TTNorms-Medium;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 21.6px;
    
    margin: 0.3% 15px 0 15px;
}

.crashvideo {
    width: 115px;
    height: 30px;
    border-radius: 4px;
    margin-top: 15px;
    
    background-color: #5f3ec0;
    color: #ffffff;
}

.video__icon {
    margin-left: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#ex2 {
    display: none;
}

.youtube__icon-play {
    margin-left: auto;
    margin-right: auto;

    margin-top: 20.5px;
    width: 25px;
    height: 18.75px;
    
    align: center;
}

.content__text {
    margin-top: 16px;
    text-align: left;
    margin-left: 15px;
    margin-right: 90px;
    
    font-family: TT Norms;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 150%;
    /* or 22px */


    /* Main text */

    color: #cacaca;
}

.endlink {
    margin-top: 20px;
    margin-left: 15px;
    margin-bottom: 20px;
    
    font-family: TT Norms;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 100%;
    color: #121212;
}

a {
    text-decoration: none;
}

.endlink a {
    color: #121212;
}

.endlink a:visited {
    color: #800080;
}

.show__more {
    width: 345px;
    height: 50px;
    display: block; /* added */
    margin: auto; /* added */
    /* cannot use auto in padding */
    /* padding: 40px auto 40px auto; */
    border-radius: 6px;
    
    background-color: #5f3ec0;
    color: #ffffff;
}


.content {
    display: grid;
    grid-template-areas: 'content__parttext content__parttext'
                        'content__parttext content__parttext'
                        'content__parttext content__parttext'
                        'content__parttext content__parttext';
    grid-template-columns: 50% 50%;
}

.content__article {
    grid-area: 'content__parttext';
}
    <html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="globalcontainer">
                <div class="header">
                        <div class="header__text">
                            Обзоры
                        </div>
                        <div class="header__buttons">
                            <!-- <span> -->
                                <button class="header__button">Все</button>
                                <button class="header__button">Видео</button>               
                                <button class="header__button">Текст</button>               
                                <button class="header__button">Обзоры</button>
                                <button class="header__button">Сравнения</button>
                                <button class="header__button">Краш видео</button>
                                <button class="header__button">Распаковка</button>
                            <!-- </span> -->
                        </div>
                </div>      
                <div class="content" id="content">
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                </div>              
                </div>              
                <button class="show__more">Показать еще</button>
        <!-- </div> -->
        <div class="footer">
                <div class="logo__company">
                </div>
                <div class="contacts">
                    <div class="contacts__title">
                        Контакты
                    </div>
                    <div class="contacts__telephones">
                        <div class="telephone1">
                        +7 (800) 333 32 24
                        </div>
                        <div class="telephone2">
                        +7 (812) 448 68 11
                        </div>
                    </div>
                    <button class="requestcall">
                        Заказать звонок
                    </button>
                </div>
                <div class="internetshop">
                        <div class="internetshop__title">
                            Интернет магазин
                        </div>
                        <div class="disclosure__arrow">
                            >
                        </div>
                </div>
                <div class="company">
                        <div class="company__title">
                            Компания
                        </div>
                        <div class="disclosure__arrow">
                            >
                        </div>
                </div>
                <div class="help__to__the__buyer">
                        <div class="help__to__the__buyer__title">
                            Помощь покупателю
                        </div>
                        <div class="disclosure__arrow">
                            >
                        </div>                  
                </div>
                <div class="socialnetworks__links">
                        <div class="socialnetworks__links__title">
                            Мы в соц. сетях
                        </div>
                        <div class="socialnetworks__links-images">
                            <div class="facebook-image">
                                <embed src="../img/facebook.svg">
                            </div>
                        </div>
                </div>
                <div class="allrights">
                        <div class="allrights__text">
                            © 2020 Все права защищены
                        </div>
                </div>
        </div>          
    </div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>

    【讨论】：

      猜你喜欢
      • 2018-05-27
      • 1970-01-01
      • 1970-01-01
      • 2014-08-27
      • 1970-01-01
      • 2015-11-22
      • 2015-07-24
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode