css - 水平居中一个伪元素(形成一个三 Angular 形)

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;
}

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

Answer 1

考虑使用以下 CSS。我正在使用 left 移动元素，使其左边缘位于中心点，使用 margin:0 0 0 -32px 将元素向左移动 32px(一半它的宽度)。

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;
}

.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;
}

<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>