'What is causing my text to be center aligned in desktop?
I'm using Bootstrap 4's accordion on this page, and the text of the last item of the accordion is being centered. I'm not using text-center nor do I have a CSS property of text-align: center so I have no idea what is causing this. All the accordion's text is centered in mobile only, not desktop.
My code:
.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:[email protected]">[email protected]</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>Solution 1:[1]
The partial reason is because the button has text-align center and if removed from your style sheet, the button will naturally have text-align center. The reason you don't see it occuring to your other elements is because the other buttons are not the full-width of their h5 containers.
To understand what I am saying add:
.btn {
width: 100%
}
To your button class, you will notice all buttons actually text-align center, not just the last one. Adding width 100% gives all your button elements "room" to align center.
The initial reason, you don't see it with your last option until your text wraps is because your button is the same width as your h5 "container", but once it is forced to wrap there is room for it to align center.
So to fix your problem add:
.btn {
width: 100%; /*Optional*/
text-align: left;
}
To those elements you do not want to align center.
Solution 2:[2]
It's the .btn class of bootstrap. You need to override it's text-align property.
.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;
}
}
.accordion-faq .card-header .btn {
text-align: left;
}<!-- 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:[email protected]">[email protected]</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>Solution 3:[3]
Well
@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;
}
}
Here you can see it in action:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Debsmita Paul |
| Solution 3 |