按照官方网站的DEMO代码运行，并不居中对齐啊 #16476

startjava · 2024-04-12T01:17:20Z

startjava
Apr 12, 2024

https://element-plus.org/zh-CN/component/carousel.html#%E8%87%AA%E5%8A%A8%E9%AB%98%E5%BA%A6

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .carousel-item {
                color: #475669;
                opacity: 0.75;
                margin: 0;
                text-align: center;
            }

            .el-carousel__item h3 {
                color: #475669;
                opacity: 0.75;
                display: flex;
                align-items: center;
                margin: 0;
                text-align: center;
                height: 100%;
            }

            .el-carousel__item:nth-child(2n) {
                background-color: #99a9bf;
            }

            .el-carousel__item:nth-child(2n + 1) {
                background-color: #d3dce6;
            }
        </style>
        <script type="module" src="5_自动高度.js"></script>
    </head>
    <body>
        <div id="mydiv1">
            <div class="block text-center" style="height: 300px">
                <span class="demonstration">each carousel-item has a different height</span>
                <el-carousel height="auto" autoplay>
                    <el-carousel-item style="height: 100px">
                        <h3 class="small justify-center" text="2xl">height 100px</h3>
                    </el-carousel-item>
                    <el-carousel-item style="height: 200px">
                        <h3 class="small justify-center" text="2xl">height 200px</h3>
                    </el-carousel-item>
                    <el-carousel-item style="height: 300px">
                        <h3 class="small justify-center" text="2xl">height 300px</h3>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </body>
</html>

import {createApp, reactive, ref} from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp({
    setup() {

        return {}
    }
});
app.use(ElementPlus)
app.mount("#mydiv1");

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

按照官方网站的DEMO代码运行，并不居中对齐啊 #16476

{{title}}

Replies: 0 comments

Select a reply

按照官方网站的DEMO代码运行，并不居中对齐啊 #16476

startjava Apr 12, 2024

Replies: 0 comments

startjava
Apr 12, 2024