我在这个页面上使用了 Bootstrap 4 的 Accordion ， Accordion 的最后一项的文本被居中。我没有使用 text-center我也没有 text-align: center 的 CSS 属性所以我不知道是什么原因造成的。所有 Accordion 的文本都集中在移动端，而不是桌面端。
我的代码:
.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%
}
最初的原因是，在文本换行之前，您在最后一个选项中看不到它，因为您的按钮与 h5“容器”的宽度相同，但是一旦它被强制换行，它就有空间对齐中心。
因此，要解决您的问题，请添加:
.btn {
width: 100%; /*Optional*/
text-align: left;
}
关于html - 是什么导致我的文本在桌面居中对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63811546/