“CSS”的版本间的差异
跳到导航
跳到搜索
增加
在
| 第1行： | 第1行： | ||
| − | == 在 <code>body</code> 中居中一个 <code>div</code> == | + | [[Category:Frontend]] |
| + | == 笔记 == | ||
| + | |||
| + | === 增加 <code>br</code> 行间的高度 === | ||
| + | |||
| + | 实际上 <code>br</code> 没有高度，但可通过更改 <code>line-height</code> 的值来实现。<ref>[https://stackoverflow.com/a/1409742/10974106 How to change the height of a <br>]</ref> | ||
| + | |||
| + | === 在 <code>body</code> 中居中一个 <code>div</code> === | ||
<ref>[https://stackoverflow.com/a/12772084/10974106 How to vertically center a “div” element for all browsers using CSS?]</ref> | <ref>[https://stackoverflow.com/a/12772084/10974106 How to vertically center a “div” element for all browsers using CSS?]</ref> | ||
| − | |||
<syntaxhighlight lang=css> | <syntaxhighlight lang=css> | ||
html { | html { | ||
| 第36行： | 第42行： | ||
<references /> | <references /> | ||
| − | |||
| − | |||
2021年8月9日 (一) 19:25的版本
笔记
增加 br 行间的高度
实际上 br 没有高度，但可通过更改 line-height 的值来实现。[1]
在 body 中居中一个 div
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
width: 100%;
display: table;
}
.main {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
}
<div class="container">
<div class="main">
Stuff
</div>
</div>