中心浮球::之前和之后::元素

我想以后和在他的元素居中的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; 
}

我想中心像照片的所有元素。

来源

2016-07-28 Pierre

你能澄清你想要什么？两个不同内容的屏幕截图，以及三种不同的字体重量，如果不解释更多的话，会令人困惑。另外，HTML和CSS需要更完整;我们需要看看现在会发生什么。 –

一种解决方案。还有更多，但这很简单。将左侧定位到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>

来源

2016-07-28 10:01:17 blonfu

谢谢你的帮助。这是完美的。 :) – Pierre

中心浮球::之前和之后::元素

回答

相关问题