Rumah > Artikel > hujung hadapan web > 简单介绍HTML+CSS实现单列布局和水平居中布局的方法

简单介绍HTML+CSS实现单列布局和水平居中布局的方法

巴扎黑asal: 2017-09-07 09:32:421753semak imbas

这篇文章主要介绍了HTML+CSS实现单列布局水平居中布局的相关资料,需要的朋友可以参考下

水平居中布局

父元素text-align:center;子元素：inline-block;
优点：兼容性好；
不足：需要同时设置子元素和父元素

<!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>水平居中布局</title>
<style>
    *{
      margin: 0;
      padding: 0;
    }
    .parent {
        width: 100%;
        background: green;
        text-align: center;
    }
    .child {
        display: inline-block;
        width: 800px;
        height: 100px;
        background: blue;
    }
</style>
</head>
<body>
<p class="parent">
    <p class="child">1</p>
    <p class="child">2</p>
    <p class="child">3</p>
    <p class="child">4</p>
    <p class="child">5</p>
    <p class="child">6</p>
</p>
</body>
</html>

Atas ialah kandungan terperinci 简单介绍HTML+CSS实现单列布局和水平居中布局的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

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 sebelumnya：详解css实现0.5像素边框的方法Artikel seterusnya：单纯使用CSS来实现预加载的动画效果代码讲解

Artikel berkaitan

Lihat lagi