css各元素实用详解（不断更新中...）

最新推荐文章于 2024-12-30 21:24:57 发布

原创最新推荐文章于 2024-12-30 21:24:57 发布 · 363 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了CSS中的display属性如何用于实现不同的布局效果，包括内联、块级及内联块级元素的使用方法，并演示了如何利用vertical-align属性实现图片或文字的居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.display:inline-block

首先先来理解几个样式的含义：

display:inline; 内联元素，在同一行显示。

display:block; 块级元素，有换行，会换到第二行。

display:inline-block; 在同一行内的块级元素。

先看一个案例

<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>

a标签默认是一行的，inline在这里没用，width和height在这里没用，效果如图：

<a href="#" style="display:block;width:100px;height:100px;background:#ccc;margin-bottom: 10px">链接一</a>
<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接二</a>

这里的两行是块状元素了，所以长宽高生效了；但因为是块状，有分隔符，所以是两行了。效果如下：

<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a>
<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接二</a>
这样就达到了块状，在同一行显示，效果如图：

2.vertical-align:middle
把此元素放置在父元素的中部。 懒人做法可以把图片或文字居中
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>404页面</title>
    <style type="text/css">
        body{ margin:0; background:#333; _height:100%;}
        .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; font-size:0;}
        .img404{ border:0; width:700px; vertical-align:middle;}
        .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}
    </style>
</head>
<body>
<div class="wall">
    <span class="verticalAlign"></span>
    <a href="index.html"><img class="img404" src="images/404.jpg" alt="404页面" /></a>
</div>
</body>
</html>
效果如下：