ie8下div中的i元素水平垂直居中怎么设置样式
时间: 2023-05-16 17:07:22 浏览: 61
您可以使用以下样式将i元素水平垂直居中:
div {
display: flex;
justify-content: center;
align-items: center;
}
i {
display: inline-block;
}
这将使i元素在div中水平垂直居中。
相关问题
div中的i元素水平垂直居中怎么设置样式
可以使用以下样式来实现div中的i元素水平垂直居中:
```
div {
display: flex;
justify-content: center;
align-items: center;
}
i {
display: inline-block;
vertical-align: middle;
}
```
这样设置后,i元素就会水平垂直居中在div中。
div中li水平居中垂直居中
要实现div中的li元素水平居中和垂直居中对齐,可以使用CSS中的flexbox布局。
1. 将div元素设置为flex容器,并设置justify-content属性为center和align-items属性为center,可以实现li元素的水平和垂直居中对齐。
```css
div {
display: flex;
justify-content: center;
align-items: center;
}
```
2. 将li元素设置为行内块元素,并将其父元素的text-align属性设置为center,可以实现li元素的水平居中对齐。
```css
li {
display: inline-block;
}
div {
text-align: center;
}
```
完整的HTML和CSS代码如下:
```html
<div>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</div>
```
```css
div {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
li {
display: inline-block;
}
```
其中,div元素使用flexbox布局实现水平和垂直居中对齐,li元素使用inline-block属性使其可以水平排列,div元素的text-align属性设置为center,可以实现li元素的水平居中对齐。