水平居中一个伪元素（形成一个三角形）

Question

我正在尝试在CSS中创建一个“向下箭头”图，并将其水平居中。容器是全宽（100％）。问题是我不能完美中心元素。知道如何实现这一目标吗？

h2:after{
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 24px solid #097fc2;
    content: "";
    display: block;
    height: 0;
    left: 48.4%;
    margin: auto;
    position: absolute;
    text-align: center;
    top: 53px;
    width: 0;
    z-index: 1;
}

您可以在“PROCEDURES”下看到一个工作示例here。

Answer 1

考虑使用以下CSS。我使用left移动项目，使其左边缘位于中心点，margin:0 0 0 -32px将元素移动32px（宽度的一半）。< / p>

h2:after{
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 24px solid #097fc2;
    content: "";
    display: block;
    height: 0;
    left: 50%;           /* Changed this */
    /* margin: auto;        Removed This */
    margin: 0 0 0 -32px; /* Added this */
    position: absolute;
    text-align: center;
    top: 53px;
    width: 0;
    z-index: 1;
}

＆＃13;

＆＃13;

.vc_custom_1414444458431 {
    margin-bottom: 0px !important;
    background-color: #097fc2 !important;
}
h2:after {
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 24px solid #097fc2;
    content:"";
    display: block;
    height: 0;
    left: 50%;
    /* Changed this */
    /* margin: auto;        Removed This */
    margin: 0 0 0 -32px;
    /* Added this */
    position: absolute;
    text-align: center;
    top: 53px;
    width: 0;
    z-index: 1;
}

＆＃13;

<div class="vc_row wpb_row vc_inner vc_row-fluid vc_custom_1414444458431">
    <div class="vc_col-sm-12 wpb_column vc_column_container">
        <div class="wpb_wrapper">
            <div class="wpb_text_column wpb_content_element  procedures-title">
                <div class="wpb_wrapper">
                    	<h2 style="text-align: center;">PROCEDURES</h2>

                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;