我想在H3之前和之后以他的元素为中心,目前我有这个:
的HTML
<h2>Nos réalisations dans la région</h2>
的CSS
h2 {
font-size: 35px;
font-weight: 300;
margin-top: 0;
color: #fff;
position: relative;
text-transform: uppercase;
float: left;
}
h2::before {
content: '';
width: 60px;
height: 5px;
background: #248290;
position: absolute;
bottom: -9px;
left: 0;
}
h2::after {
content: '';
width: 100%;
height: 1px;
background: #248290;
position: absolute;
bottom: -7px;
left: 0;
}
我想像照片一样集中所有元素。
最佳答案
一种解决方案。还有更多,但这很简单。左移至50%,并使用负边距减去元素宽度的一半。
h2 {
font-size: 35px;
font-weight: 300;
margin-top: 0;
color: #fff;
position: relative;
text-transform: uppercase;
float: left;
background: #333;
}
h2::before {
content: '';
width: 60px;
height: 5px;
background: #248290;
position: absolute;
bottom: -9px;
left: 50%;
margin-left:-30px;
}
h2::after {
content: '';
width: 100%;
height: 1px;
background: #248290;
position: absolute;
bottom: -7px;
left: 0;
}
<h2>Nos réalisations dans la région</h2>
关于css - 使用:: before和:: after元素进行中心 float ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38632877/