是什么导致我的文本在桌面上居中对齐？
Pau*_*ula 6 html css bootstrap-4
我在此页面上使用 Bootstrap 4 的手风琴，手风琴最后一项的文本居中。我没有使用text-center也没有 CSS 属性，text-align: center所以我不知道是什么导致了这种情况。手风琴的所有文本仅以移动设备为中心，而不是桌面设备。
我的代码：
.accordion-faq .card {
border-radius: 0;
border: 1px solid #F1F5F7;
border-right: none;
border-left: none;
text-align: left;
}
.accordion-faq .card-header {
background-color: white;
border-bottom: none;
}
.accordion-faq .card-header button {
color: #0074e1;
padding-left: 0;
font-size: 0.9em;
}
.accordion-faq .card-header h5 button::after {
content: '\f107';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #0074e1;
position: absolute;
right: 35px;
top: 19px;
}
.accordion-faq .card-header h5 button[aria-expanded="true"]:after {
content: '\f077';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #0074e1;
position: absolute;
right: 35px;
top: 19px;
font-size: 0.8em;
}
.accordion-faq .card-body {
color: #494D53;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 25px;
}
.accordion-faq .card-body a {
color: #0074e1;
}
.faq-no-answer {
font-style: normal;
font-weight: normal;
font-size: 0.9em;
letter-spacing: 0.02em;
color: #494D53;
margin-top: 50px;
}
/* Media Query */
@media (max-width: 992px) {
.accordion-faq,
.accordion-faq .card-header,
.accordion-faq .card-body {
text-align: center !important;
}
.accordion-faq .card-header h5 button::after {
display: none;
}
.accordion-faq .card-header h5 button[aria-expanded="true"]:after {
display: none;
}
}<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Fontawsome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Faq Vendedores -->
<div class="col-lg-9 col-md-12 col-sm-12 col-12 mx-auto" id="faqVendedores">
<hr class="separator">
<p class="middle-title-thin text-center">Vendedores</p>
<!-- Accordion -->
<div id="accordion" class="accordion-faq">
<div class="card">
<div class="card-header" id="headingQuestionOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseQuestionOne" aria-expanded="false" aria-controls="collapseQuestionOne">
¿Por qué debería agregar company como una opción de pago?
</button>
</h5>
</div>
<div id="collapseQuestionOne" class="collapse" aria-labelledby="headingQuestionOne" data-parent="#accordion">
<div class="card-body">
company es mundialmente reconocida por sus características y facilidad de uso. Nuestra cobertura mundial con múltiples idiomas y tipos de moneda se traducen en un notorio aumento de tu potencial clientela. Nuestro equipo de soporte está listo para ayudarte
a aprovechar, de la mejor manera posible, nuestros servicios.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingQuestionThirtyone">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseQuestionThirtyone" aria-expanded="false" aria-controls="collapseQuestionThirtyone">
¿Puedo insertar botones de pago en múltiples páginas web?
</button>
</h5>
</div>
<div id="collapseQuestionThirtyone" class="collapse" aria-labelledby="headingQuestionThirtyone" data-parent="#accordion">
<div class="card-body">
Sí, puedes hacer esto siempre y cuando las páginas se encuentren en el mismo sitio web. Debido a razones de cumplimiento y/o conformidad, si tienes múltiples sitios web necesitarás solicitar la creación de una nueva cuenta en company para cada website.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingQuestionThirtytwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseQuestionThirtytwo" aria-expanded="false" aria-controls="collapseQuestionThirtytwo">
¿Puedo reemplazar la imagen del botón de pago de company por una propia?
</button>
</h5>
</div>
<div id="collapseQuestionThirtytwo" class="collapse" aria-labelledby="headingQuestionThirtytwo" data-parent="#accordion">
<div class="card-body">
Por supuesto, simplemente reemplaza la URL de la imagen.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingQuestionThirtythree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseQuestionThirtythree" aria-expanded="false" aria-controls="collapseQuestionThirtythree">¿Por qué recibo un mensaje de error cuando trato de acceder a mi archivo IPN desde en navegador?</button>
</h5>
</div>
<div id="collapseQuestionThirtythree" class="collapse" aria-labelledby="headingQuestionThirtythree" data-parent="#accordion">
<div class="card-body">
Algunos archivos IPN «listos para usar» pueden incluir medidas de seguridad para asegurarse de que la notificación de pago realmente proviene de company. En estos casos, al intentar acceder al archivo desde tu navegador se mostrará un mensaje de error.
Si necesitas probar notificaciones, recomendamos utilizar un botón de pago y cambiar tu cuenta a modo Test.
</div>
</div>
</div>
</div>
<!-- /Accordion -->
<p class="text-center faq-no-answer">¿No encontraste tu respuesta? Envíanos un correo a <a href="mailto:helpdesk@company.com">helpdesk@company.com</a></p>
</div>
<!-- /Faq Vendedores -->
<script src="js/popper.min.js"></script>
<script src="js/popper.min.js.map"></script>
<script src="js/jquery.min.js"></script>部分原因是因为按钮具有文本对齐中心，如果从样式表中删除，按钮自然会具有文本对齐中心。您没有看到它发生在其他元素上的原因是因为其他按钮不是其 h5 容器的全宽。
要理解我在说什么，请添加：
.btn {
width: 100%
}
对于您的按钮类，您会注意到所有按钮实际上都是文本居中对齐，而不仅仅是最后一个。添加宽度 100% 可以为所有按钮元素提供居中对齐的“空间”。
最初的原因是，在文本换行之前，您在最后一个选项中看不到它，因为您的按钮与 h5“容器”的宽度相同，但一旦强制换行，就有空间使其居中对齐。
因此，要解决您的问题，请添加：
.btn {
width: 100%; /*Optional*/
text-align: left;
}
对于那些您不想居中对齐的元素。