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>
