【关于居中的方式，如何在不使用flex和文本居中的方式情况下让它居中 _居中】

关于居中的方式，如何在不使用flex和文本居中的方式情况下让它居中
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(1)
居中
详细描述
截图
代码
<!DOCTYPE html>
<html lang="en">

<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">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./task7-2.css">
</head>

<body>
    <header>
        <!-- 头部 -->
        <button class="thb">
            <!-- The head box头部盒子缩写 -->
            <div class="itb"></div>
            <!-- 左边按钮Inside the button的缩写 -->
        </button>
        <span class="vote">投票</span>
        <!-- 中间文字 -->
        <button class="rb">
            <!-- 右边关闭按钮外部盒子right-box缩写 -->
            <div class="icon_false"></div>
            <!-- 右边关闭按钮 -->
        </button>
    </header>
    <main>
        <!-- 中间 -->
        <div class="pb">
            <!-- 上面的播放选项盒子play box缩写 -->
            <span class="vw">发言讨论结束，大家请投票</span>
            <!-- Vote words投票文本的缩写 -->
            <audio autoplay="autoplay">
                <!-- 音频播放器 -->
                <source src="./css-7/task7/财富自由.mp3.mp3">
            </audio>
            <div class="rd">
                <!-- roundness圆形的缩写 -->
                <div class="tg"></div>
                <!-- triangle三角形的缩写 -->
            </div>
        </div>
        <div class="st"></div>
        <!-- Small triangle小三角形 -->
        <span class="hint">点击得票数最多人的头像</span>
        <!-- 页面说明文字 -->
        <div>
            <div class="oll">
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
            </div>
        </div>
    </main>
    <footer>
        <!-- 底部盒子 -->
        <div class="yu">
                <a href="./task7-3.html">投死</a>
        </div>
      
    </footer>
</body>

</html>
html {
    font-size: 62.5%;
}

/* 页面设置样式 */
body {
    margin: 0;
    font-size: 1.6rem;
}

/* 中心样式设置 */
header {
    display: flex;
    justify-content: space-between;
    top: 0;
    height: 4.8rem;
    background-color: #29BDE0;
    position: fixed;
    width: 100%;
    z-index: 1;
}

/* 头部样式设置 */
.thb {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto 1.15rem;
    width: 2rem;
    height: 2rem;
    padding: 3px;
    border: 1.5px solid white;
    background-color: #29BDE0;
    outline: none;
}

/* 左边按钮外部盒子样式 */
.itb {
    width: 4rem;
    height: 1.5px;
    padding: 4px 0;    
    border: 1px solid white;
    border-top: 1.5px solid white;
    border-bottom: 1.5px solid white;
    border-left: 0;
    border-right: 0;
    background-clip: content-box;
    background-color: white;
}

/* 左边按钮样式 */
.vote {
    font-size: 17px;
    color: white;
    margin: auto;
}

/* 中间文字样式 */
.rb {
    background-color: #29BDE0;
    border: 0;
}

/* 右边关闭按钮外部盒子样式 */
.icon_false {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: white;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    -webkit-transform: rotate(45deg);
}

/* 右边关闭按钮 */

.icon_false:after {
    content: '/';
    display: block;
    width: 20px;
    height: 2px;
    background: white;
    -webkit-transform: rotate(-90deg);
}

/* 关闭按钮样式 */
main {
    margin-bottom: 5rem;
    background-color: #29BDE0;
}

/* 中间部分样式 */
.pb {
    display: flex;
    height: 4.1rem;
    background-color: #b9e9f5;
    padding-top: 4.8rem;
    justify-content: space-between;
}

/* 上面的播放选项盒子play box缩写样式  */
.vw {
    padding: 1.3rem 0;
    padding-left: 2.3rem;
    font-size: 13px;
}

/* Vote words投票文本的缩写样式 */

.rd {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    background-color: #FBB435;
    border-radius: 50%;
    margin: auto 1rem;
}

/* 圆形的缩写样式 */
.tg {
    width: 0;
    height: 0;
    border-width: 8px;
    border-right-width: 0px;
    border-style: solid;
    border-color: transparent transparent transparent white;
    margin-left: 10%;
}

/* 三角形缩写样式 */
.st {
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #b9e9f5 transparent transparent transparent;
    margin-left: 3.55rem;
}

/* 下边小三角形样式 */
.hint {
    color: white;
    margin-left: 3.6rem;
}

/* 页面说明文字样式 */

.choice {
    width: 28.9%;
    height: 28.9vw;
    padding: 0;
    margin: 1rem .6% 8.3vw 2.5%;
    border: 3px solid #FFFFFF;
    background: #F5C97B;
    outline: none;
}

/* 第一个选项盒子 */

.status {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75%;
    color: #565656;
    font-size: 15px;
}

/* 游戏身份样式 */
.number {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25%;
    font-size: 11.5px;
    color: white;
    background-color: #83B09A;
}

/* 游戏号码样式 */

.dropdown-content {
    display: none;
    padding: 0;
}

/* 下拉框盒子样式 */
.one {
    display: inline-block;
    width: 4.5vw;
    height: 4.5vw;  
    background: url(./css_sprite2s.png) no-repeat;
    background-position: 14.286% 14.286%;
    background-size: 333.33%;
}

/* 下拉框第一张图片样式 */
.two {
    display: inline-block;
    width: 4.5vw;
    height: 4.5vw;
    background: url(./css_sprite2s.png) no-repeat;
    background-position: 85.714% 14.286%;
    background-size: 333.33%;
}

/* 下拉框第二张图片样式 */
.three {
    display: inline-block;
    width: 4.5vw;
    height: 4.5vw;
    background: url(./css_sprite2s.png) no-repeat;
    background-position: 14.286% 85.714%;
    background-size: 333.33%;
}

/* 下拉框第三张图片样式 */
.four {
    display: inline-block;
    width: 4.5vw;
    height: 4.5vw;
    background: url(./css_sprite2s.png) no-repeat;
    background-position: 85.714% 85.714%;
    background-size: 333.33%;
}

/* 下拉框第四张图片样式 */
.choice:hover .dropdown-content {
    display: inline-block;
    padding: 0;
}

/* 模拟下拉框选项 */
footer {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 12%;
    width: 100%;
    bottom: 0;
    background-color: #29BDE0;
}

/* 底部盒子样式 */
.yu{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 94%;
    height: 100%;
    border: 1px solid white;
    border-left: 0;
    border-right: 0;
}
a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 65%;
    border: 0;
    font-size: 20px;
    color: white;
    background-color: #FBB435;
    outline: none;
    text-decoration: none;
}

/* 底部盒子按钮缩写样式 */
.bt {
    font-size: 20px;
    color: white;
编辑于2024-04-22
时间排序
热门排序
[成都|]JS-
0

不用flex，可以使用float或者标准流文档，使用width：33%，来均分，或者使用bs

查看全部>

编辑于2018-11-24
去第页