masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > 多个div垂直居中横向排列（附代码）

多个div垂直居中横向排列（附代码）

云罗郡主
Lepaskan： 2018-10-19 15:23:48
ke hadapan
5215 orang telah melayarinya

本篇文章给大家带来的内容是关于多个div垂直居中横向排列（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

父级p，子级p高度都为自适应。

           2018090316313592.png                            2.png

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>垂直居中</title>

    <style>

        #mine {

            width: 500px;

            height:500px;

            background: #f00;

            margin: 0 auto;

            display: flex;

        }

        .center {

            /*flex: 1;*/

            /*width: 100px;

            height: 100px;*/

            background: #0f0;

            margin:auto;

        }

    </style>

</head>

<body>

    <p id="mine">

        <p class="center">一</p>

        <p class="center">二</p>

        <p class="center">三</p>

    </p>

</body>

</html>

Salin selepas log masuk

 以上就是对的全部介绍，如果您想了解更多有关CSS视频教程，请关注PHP中文网。

Atas ialah kandungan terperinci 多个div垂直居中横向排列（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
div垂直居中横向排列
Artikel sebelumnya：CSS实现对话框效果如何实现（代码） Artikel seterusnya：CSS怎么实现自适应正方形？有代码吗
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan