CSS 布局 - display: inline-block

display: inline-block

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

（相当于可以在行上显示块状元素）

使用 inline-block 来创建导航链接

display 的一种常见用法：inline-block 用于水平而不是垂直地显示列表项。下例创建了一个水平导航链接：
实例：

<!DOCTYPE html>
<html>
<head>
<style>
.nav {background-color: yellow; list-style-type: none;text-align: center;margin: 0;padding: 0;
}.nav li {display: inline-block;font-size: 20px;padding: 20px;
}
</style>
</head>
<body><h1>水平导航链接</h1><p>默认地，列表项是垂直显示的。在本例中，我们使用 display: inline-block 来水平地显示它们（并排）。</p>
<p>注释：如果您调整浏览器的大小，链接会在变得拥挤时自动换行。</p><ul class="nav"><li><a href="#home">Home</a></li><li><a href="#about">About Us</a></li><li><a href="#clients">Our Clients</a></li>  <li><a href="#contact">Contact Us</a></li>
</ul></body>
</html>

CSS 布局 - 水平和垂直对齐

居中对齐元素

要使块元素（例如 <div> ）水平居中，请使用 margin: auto;。

设置元素的宽度将防止其延伸到容器的边缘。

然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配
实例
.center {

  margin: auto;width: 50%;border: 3px solid green;padding: 20px;
}

注意：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。

居中对齐文本

如果仅需在元素内居中文本，请使用 text-align: center;：
实例

.center {text-align: center;border: 3px solid green;
}

居中对齐图像

如需居中图像，请将左右外边距设置为 auto，并将其设置为块元素
实例

img {display: block;margin-left: auto;margin-right: auto;width: 40%;
}

左和右对齐 - 使用 position

对齐元素的一种方法是使用 position: absolute;
实例

.right {position: absolute;right: 0px;width: 300px;border: 3px solid #73AD21;padding: 20px;
}

注意：绝对定位的元素将从正常流中删除，并可能出现元素重叠。

左和右对齐 - 使用 float

对齐元素的另一种方法是使用 float 属性：

实例

.right {float: right;width: 300px;border: 3px solid #73AD21;padding: 10px;
}

注意：如果一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器。您可以使用 clearfix hack 来解决此问题。（添加以下代码）

.clearfix {overflow: auto;
}

垂直对齐 - 使用 padding

有很多方法可以在 CSS 中垂直对齐元素。一个简单的解决方案是使用上下内边距
如需同时垂直和水平对齐，请使用 padding 和 text-align: center;

垂直对齐 - 使用 line-height

另一个技巧是使用其值等于 height 属性值的 line-height 属性：

垂直对齐 - 使用 position 和 transform

如果您的选择不是 padding 和 line-height，则另一种解决方案是使用 position 和 transform 属性

<!DOCTYPE html>
<html>
<head>
<style>
.center { height: 200px;position: relative;border: 3px solid green;
}.center p {margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
}
</style>
</head>
<body><h1>居中</h1><p>在此例中，我们使用 position 和 transform 属性将 div 元素垂直和水平居中：</p><div class="center"><p>我是垂直和水平居中。</p>
</div></body>
</html>

CSS学习笔记（九）display: inline-block，CSS 布局- 水平和垂直对齐相关推荐

CSS学习笔记（3）【CSS元素显示模式以及背景设置】
CSS基础学习一.CSS元素的显示模式(了解) 在HTML中将所有标签分为容器级和文本级两类在CSS中将所有的标签分为块级元素和行内元素 1.什么是块级元素和行内元素? 块级元素会独占一行而行内元 ...
CSS学习笔记（十二）CSS 水平导航栏
CSS 水平导航栏水平导航栏有两种创建水平导航栏的方法:使用行内或浮动列表项. 行内列表项构建水平导航栏的一种方法是,除了上一章中的"标准"代码外,还要将 <li> ...
CSS学习笔记（二十一）CSS变量var()
CSS 变量 CSS 变量 var() 函数用于插入 CSS 变量的值. CSS 变量可以访问 DOM,这意味着您可以创建具有局部或全局范围的变量,使用 JavaScript 来修改变量,以及基于媒体 ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
CSS学习笔记 #20201119
CSS学习笔记 #20201119 目录文章目录 CSS学习笔记 #20201119 目录引言选择器权值样式引言 CSS能搭配HTML文档,将网页繁杂的样式信息从HTML文档中相对独 ...
css学习笔记 day two
CSS学习笔记 Day two 13.3 css边框属性属性: 边框样式:border-style:solid/double/groove/ridge/insert/outset; 说明:第一个表示 ...
[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...

CSS学习笔记（九）display: inline-block，CSS 布局- 水平和垂直对齐