使用:: after添加中心输入字段和图标

Question

我在输入字段后添加了一个图标，该图标需要在div中居中。我可以使用text-align：center轻松地使输入文本居中，但是使用:: before添加时发现将图标居中非常困难。

我可以使搜索文本居中，但不能使图标居中

如何将搜索文本和图标居中，使其居中于CENTER标题下方？是否可以执行此操作而无需修改/添加HTML？

这是我正在使用的HTML和CSS

.search-form {
        overflow: hidden;
        position: relative;
    }
    
    .header-right {
    	float: right;
    	position: relative;
    	text-align: right;
    	width: 25%;
    	z-index: 99;
    }
    
    .header-left .search-form::before {
    	color: #fff;
    	content: "\f375";
    	display: block;
    	font-family: "Ionicons"; /* stylelint-disable-line */
    	padding-left: 1px;
    	position: absolute;
    	top: 12px;
    }
    
    .header-left .search-form input[type="submit"] {
    	border: 0;
    	clip: rect(0, 0, 0, 0);
    	height: 1px;
    	margin: -1px;
    	padding: 0;
    	position: absolute;
    	width: 1px;
    }
    
    .header-left input[type="search"] {
    	border-width: 0;
    	background-color: transparent;
    	color: #fff;
    	font-size: 14px;
    	font-weight: 700;
    	letter-spacing: 2px;
    	text-align: left;
    	text-transform: uppercase;
    }
    
    .header-left ::placeholder {
    	color: #fff;
    	opacity: 1;
    }
    
    .header-left input[type="search"] {
    	text-align: right;
    }

<div class="header-left"><form class="search-form" method="get" action="http://dev.local/" role="search" itemprop="potentialAction" itemscope="" itemtype="https://schema.org/SearchAction"><label class="search-form-label screen-reader-text" for="searchform-1">Search</label><input class="search-form-input" type="search" name="s" id="searchform-1" placeholder="Search" itemprop="query-input"><input class="search-form-submit" type="submit" value="Search"><meta content="http://dev.local/?s={s}" itemprop="target"></form></div>

Update：我无法编辑由PHP函数生成的表单，因此我需要使用纯CSS来居中放置表单输入和图标。

Answer 1

将text-align:center添加到form

.search-form {
        overflow: hidden;
        position: relative;
        text-align: center;
    }
    
    .header-right {
    	float: right;
    	position: relative;
    	text-align: right;
    	width: 25%;
    	z-index: 99;
    }
    
    .header-left .search-form::before {
    	color: #fff;
    	content: "\f375";
    	display: block;
    	font-family: "Ionicons"; /* stylelint-disable-line */
    	padding-left: 1px;
    	position: absolute;
    	top: 12px;
    }
    
    .header-left .search-form input[type="submit"] {
    	border: 0;
    	clip: rect(0, 0, 0, 0);
    	height: 1px;
    	margin: -1px;
    	padding: 0;
    	position: absolute;
    	width: 1px;
    }
    
    .header-left input[type="search"] {
    	border-width: 0;
    	background-color: transparent;
    	color: #000;
    	font-size: 14px;
    	font-weight: 700;
    	letter-spacing: 2px;
    	text-align: left;
    	text-transform: uppercase;
    }
    
    .header-left ::placeholder {
    	color: #fff;
    	opacity: 1;
    }
    
    .header-left input[type="search"] {
    	text-align: right;
    }

<div class="header-left">
<form class="search-form" method="get" action="http://dev.local/" role="search" itemprop="potentialAction" itemscope="" itemtype="https://schema.org/SearchAction">
<label class="search-form-label screen-reader-text" for="searchform-1">Search</label>
<input class="search-form-input" type="search" name="s" id="searchform-1" placeholder="Search" itemprop="query-input">
<input class="search-form-submit" type="submit" value="Search">
<meta content="http://dev.local/?s={s}" itemprop="target">
</form></div>