I’m having trouble aligning

Asked

Viewed 47 times

1

I am beginner and I am trying at all costs to leave the description as follows;

inserir a descrição da imagem aqui

However, when you paste html into the platform’s Adm, the description is misaligned; inserir a descrição da imagem aqui

HTML 

<h3 class="why-trocafone__title" style="box-sizing: border-box; color: #4d649b; font-family: Montserrat, &quot;open sans&quot;, sans-serif; font-size: 1.21rem; line-height: 1.1; margin-bottom: 25px; margin-top: 0px; text-align: center;">
<br /></h3>
<h3 class="why-trocafone__title" style="box-sizing: border-box; color: #4d649b; font-family: Montserrat, &quot;open sans&quot;, sans-serif; font-size: 1.21rem; line-height: 1.1; margin-bottom: 25px; margin-top: 0px; text-align: center;">
Como é o Produto?</h3>
<h3 class="why-trocafone__title" style="box-sizing: border-box; color: #4d649b; font-family: Montserrat, &quot;open sans&quot;, sans-serif; font-size: 1.21rem; line-height: 1.1; margin-bottom: 25px; margin-top: 0px; text-align: center;">
<div class="why-trocafone__subtitle" style="box-sizing: border-box; color: black; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 0.933rem; font-weight: 400; line-height: 1.377rem; margin-bottom: 10px;">
<span style="color: #666666;">É um produto que ficou exposto em uma vitrine fechada na loja do Fabricante, ou da operadora, podendo conter pequenos riscos, amassados, ou não estar em sua embalagem original.</span></div>
<div class="why-trocafone_reasons" style="box-sizing: border-box; color: #404040; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 16px; font-weight: 400; margin-top: 15px; width: 938px;">
<div class="reason" style="box-sizing: border-box; display: inline-block; padding: 15px; vertical-align: top; width: calc(20% - 4px);">
<img src="https://previews.dropbox.com/p/thumb/AAeK7BirU2-ywHBqHthSJYv--Ktxq1VNi8-01NUpAQB6I7-k_pEDpUV95q_DCeIIG61Y7K8UM4sh4xV0UySfEl7DqjGh68swOdclc9FTDAeOHhR3jpAHL3SWoRkCvnDMwJpDuPKU7Aeu4bBmbWuZpOt0NolJw3rxDzC_ulryUzul9h4HDt5TagthUOhfE5BQn4RMOKvGO3Pjq5DxM538cdvrSkRBMOyyIiJNuCQEmMl68PZ05T72euvdLBnxmO0SPPFFg8h6sI2EskOMZ0pV5POPMYs9FBn8ztBJA_jSCJFdNlajGcKbZqxngFBaDYiQO_Oaam0MDR7AT7a_mId1CvtS/p.png?fv_content=true&amp;size_mode=5" temp_src="https://previews.dropbox.com/p/thumb/AAeK7BirU2-ywHBqHthSJYv--Ktxq1VNi8-01NUpAQB6I7-k_pEDpUV95q_DCeIIG61Y7K8UM4sh4xV0UySfEl7DqjGh68swOdclc9FTDAeOHhR3jpAHL3SWoRkCvnDMwJpDuPKU7Aeu4bBmbWuZpOt0NolJw3rxDzC_ulryUzul9h4HDt5TagthUOhfE5BQn4RMOKvGO3Pjq5DxM538cdvrSkRBMOyyIiJNuCQEmMl68PZ05T72euvdLBnxmO0SPPFFg8h6sI2EskOMZ0pV5POPMYs9FBn8ztBJA_jSCJFdNlajGcKbZqxngFBaDYiQO_Oaam0MDR7AT7a_mId1CvtS/p.png?fv_content=true&amp;size_mode=5" />&nbsp; &nbsp;&nbsp;<span style="color: #4d649b; font-size: 0.933rem; font-weight: 600;">Produto funcional, original e com Nf-e</span></div>
&nbsp;<div class="reason" style="box-sizing: border-box; display: inline-block; padding: 15px; vertical-align: top; width: calc(20% - 4px);">
<img src="https://previews.dropbox.com/p/thumb/AAdtVVTsu_E0onuH11nGdKRPue9LdDjNgSZ7hKQ_rF6AWiTS_4xTiMDQNfe6xKLku4v9KqnPeC9LUBOdgXDstpKx7kDyQo1DKEoAXZISDORZA62XlzqnDa601PKkl4VaOV51mrCAmLOJ3IrQGQJAXqVP8fIHWDu24gvxcj57ybp-Ub9OsIWKjCjTkghtXYma3t1FZU-ePOGXgb9eBgXvpnUjNwoiwAXaS4x1UmZZpOM-RhIL9e4oAMmhHqrApEXwz9nzkYZOEPd4RWAS8GWWz2sGgbAdEsbUWXzDLdlDEsRATNvw7WVmyE5le5CMitb0y-3wwwRYtq28Sb-Xj2vzNiKs/p.png?fv_content=true&amp;size_mode=5" temp_src="https://previews.dropbox.com/p/thumb/AAdtVVTsu_E0onuH11nGdKRPue9LdDjNgSZ7hKQ_rF6AWiTS_4xTiMDQNfe6xKLku4v9KqnPeC9LUBOdgXDstpKx7kDyQo1DKEoAXZISDORZA62XlzqnDa601PKkl4VaOV51mrCAmLOJ3IrQGQJAXqVP8fIHWDu24gvxcj57ybp-Ub9OsIWKjCjTkghtXYma3t1FZU-ePOGXgb9eBgXvpnUjNwoiwAXaS4x1UmZZpOM-RhIL9e4oAMmhHqrApEXwz9nzkYZOEPd4RWAS8GWWz2sGgbAdEsbUWXzDLdlDEsRATNvw7WVmyE5le5CMitb0y-3wwwRYtq28Sb-Xj2vzNiKs/p.png?fv_content=true&amp;size_mode=5" /><span style="color: #4d649b; font-size: 0.933rem; font-weight: 600;">Acompanha todos os acessórios originais do modelo</span></div>
&nbsp;<div class="reason" style="box-sizing: border-box; display: inline-block; padding: 15px; vertical-align: top; width: calc(20% - 4px);">
<img src="https://previews.dropbox.com/p/thumb/AAfF0czY1iixR-hF5xYqcp_O0lekQj-O6YYIuBfsSs4150YDBz6ReXsftgrvAiYTmJwm4fvLI_yEM7MXVeXCdZ2eXkcp2KLGZd9PJwW2_gMXPvql5dUNuavier-8JwusdP-N6DMRA_oXIuUsV7WKychjiIAE3Ij8q6ukTohftnSha00sERqQojm6fondbn6segpCzW-Qa1iuv86WtArTCR-u3TYVussHNgmOhw7iUuhUd0WwOKvD7c57-FpFTThsatYHbW2pjXyUfzuaTfMU6MAD3V2xBRY3MoVTgKCVfoWyilz8VoTjpGOaYHcCdm9_F_lVkzGWo33duY5s5BESNOFz/p.png?fv_content=true&amp;size_mode=5" temp_src="https://previews.dropbox.com/p/thumb/AAfF0czY1iixR-hF5xYqcp_O0lekQj-O6YYIuBfsSs4150YDBz6ReXsftgrvAiYTmJwm4fvLI_yEM7MXVeXCdZ2eXkcp2KLGZd9PJwW2_gMXPvql5dUNuavier-8JwusdP-N6DMRA_oXIuUsV7WKychjiIAE3Ij8q6ukTohftnSha00sERqQojm6fondbn6segpCzW-Qa1iuv86WtArTCR-u3TYVussHNgmOhw7iUuhUd0WwOKvD7c57-FpFTThsatYHbW2pjXyUfzuaTfMU6MAD3V2xBRY3MoVTgKCVfoWyilz8VoTjpGOaYHcCdm9_F_lVkzGWo33duY5s5BESNOFz/p.png?fv_content=true&amp;size_mode=5" />&nbsp; &nbsp;<span style="color: #4d649b; font-size: 0.933rem; font-weight: 600;">Garantia de 12 meses com o Fabricante</span></div>
<div class="reason" style="box-sizing: border-box; display: inline-block; padding: 15px; vertical-align: top; width: calc(20% - 4px);">
<br /></div>
&nbsp;</div>
<div>
<br style="font-size: 19.36px;" /></div>
</h3>
<div>
<div class="reason" style="box-sizing: border-box; display: inline-block; padding: 15px; vertical-align: top; width: calc(20% - 4px);">
<span style="font-size: xx-small;">
</span></div>
</div>

html html5

  • Without HTML and a [mcve] it will be impossible to help you. Please search [Edit] and supplement your question.

  • Enter your HTML and CSS codes to make it easier for us to help you.

  • I’d forgotten, already added the code.

  • These classes do not have CSS?

3 answers

2


Enough in the div classy .why-trocafone_reasons vc add margin: 15px auto 0;

inserir a descrição da imagem aqui

Follows the code

	<h3 class="why-trocafone__title"
		style="box-sizing: border-box; color: #4d649b; font-family: Montserrat, &quot;open sans&quot;, sans-serif; font-size: 1.21rem; line-height: 1.1; margin-bottom: 25px; margin-top: 0px; text-align: center;">
		<br /></h3>
	<h3 class="why-trocafone__title"
		style="box-sizing: border-box; color: #4d649b; font-family: Montserrat, &quot;open sans&quot;, sans-serif; font-size: 1.21rem; line-height: 1.1; margin-bottom: 25px; margin-top: 0px; text-align: center;">
		Como é o Produto?</h3>
	<h3 class="why-trocafone__title"
		style="box-sizing: border-box; color: #4d649b; font-family: Montserrat, &quot;open sans&quot;, sans-serif; font-size: 1.21rem; line-height: 1.1; margin-bottom: 25px; margin-top: 0px; text-align: center;">
		<div class="why-trocafone__subtitle"
			style="box-sizing: border-box; color: black; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 0.933rem; font-weight: 400; line-height: 1.377rem; margin-bottom: 10px;">
			<span style="color: #666666;">É um produto que ficou exposto em uma vitrine fechada na loja do Fabricante,
				ou da operadora, podendo conter pequenos riscos, amassados, ou não estar em sua embalagem
				original.</span></div>
		<div class="why-trocafone_reasons"
			style="box-sizing: border-box; color: #404040; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 16px; font-weight: 400; margin: 15px auto 0; width: 938px;">
			<div class="reason"
				style="box-sizing: border-box; display: inline-block; padding: 15px; vertical-align: top; width: calc(20% - 4px);">
				<img src="https://previews.dropbox.com/p/thumb/AAeK7BirU2-ywHBqHthSJYv--Ktxq1VNi8-01NUpAQB6I7-k_pEDpUV95q_DCeIIG61Y7K8UM4sh4xV0UySfEl7DqjGh68swOdclc9FTDAeOHhR3jpAHL3SWoRkCvnDMwJpDuPKU7Aeu4bBmbWuZpOt0NolJw3rxDzC_ulryUzul9h4HDt5TagthUOhfE5BQn4RMOKvGO3Pjq5DxM538cdvrSkRBMOyyIiJNuCQEmMl68PZ05T72euvdLBnxmO0SPPFFg8h6sI2EskOMZ0pV5POPMYs9FBn8ztBJA_jSCJFdNlajGcKbZqxngFBaDYiQO_Oaam0MDR7AT7a_mId1CvtS/p.png?fv_content=true&amp;size_mode=5"
					temp_src="https://previews.dropbox.com/p/thumb/AAeK7BirU2-ywHBqHthSJYv--Ktxq1VNi8-01NUpAQB6I7-k_pEDpUV95q_DCeIIG61Y7K8UM4sh4xV0UySfEl7DqjGh68swOdclc9FTDAeOHhR3jpAHL3SWoRkCvnDMwJpDuPKU7Aeu4bBmbWuZpOt0NolJw3rxDzC_ulryUzul9h4HDt5TagthUOhfE5BQn4RMOKvGO3Pjq5DxM538cdvrSkRBMOyyIiJNuCQEmMl68PZ05T72euvdLBnxmO0SPPFFg8h6sI2EskOMZ0pV5POPMYs9FBn8ztBJA_jSCJFdNlajGcKbZqxngFBaDYiQO_Oaam0MDR7AT7a_mId1CvtS/p.png?fv_content=true&amp;size_mode=5" />&nbsp;
				&nbsp;&nbsp;<span style="color: #4d649b; font-size: 0.933rem; font-weight: 600;">Produto funcional,
					original e com Nf-e</span></div>
			&nbsp;<div class="reason"
				style="box-sizing: border-box; display: inline-block; padding: 15px; vertical-align: top; width: calc(20% - 4px);">
				<img src="https://previews.dropbox.com/p/thumb/AAdtVVTsu_E0onuH11nGdKRPue9LdDjNgSZ7hKQ_rF6AWiTS_4xTiMDQNfe6xKLku4v9KqnPeC9LUBOdgXDstpKx7kDyQo1DKEoAXZISDORZA62XlzqnDa601PKkl4VaOV51mrCAmLOJ3IrQGQJAXqVP8fIHWDu24gvxcj57ybp-Ub9OsIWKjCjTkghtXYma3t1FZU-ePOGXgb9eBgXvpnUjNwoiwAXaS4x1UmZZpOM-RhIL9e4oAMmhHqrApEXwz9nzkYZOEPd4RWAS8GWWz2sGgbAdEsbUWXzDLdlDEsRATNvw7WVmyE5le5CMitb0y-3wwwRYtq28Sb-Xj2vzNiKs/p.png?fv_content=true&amp;size_mode=5"
					temp_src="https://previews.dropbox.com/p/thumb/AAdtVVTsu_E0onuH11nGdKRPue9LdDjNgSZ7hKQ_rF6AWiTS_4xTiMDQNfe6xKLku4v9KqnPeC9LUBOdgXDstpKx7kDyQo1DKEoAXZISDORZA62XlzqnDa601PKkl4VaOV51mrCAmLOJ3IrQGQJAXqVP8fIHWDu24gvxcj57ybp-Ub9OsIWKjCjTkghtXYma3t1FZU-ePOGXgb9eBgXvpnUjNwoiwAXaS4x1UmZZpOM-RhIL9e4oAMmhHqrApEXwz9nzkYZOEPd4RWAS8GWWz2sGgbAdEsbUWXzDLdlDEsRATNvw7WVmyE5le5CMitb0y-3wwwRYtq28Sb-Xj2vzNiKs/p.png?fv_content=true&amp;size_mode=5" /><span
					style="color: #4d649b; font-size: 0.933rem; font-weight: 600;">Acompanha todos os acessórios
					originais do modelo</span></div>
			&nbsp;<div class="reason"
				style="box-sizing: border-box; display: inline-block; padding: 15px; vertical-align: top; width: calc(20% - 4px);">
				<img src="https://previews.dropbox.com/p/thumb/AAfF0czY1iixR-hF5xYqcp_O0lekQj-O6YYIuBfsSs4150YDBz6ReXsftgrvAiYTmJwm4fvLI_yEM7MXVeXCdZ2eXkcp2KLGZd9PJwW2_gMXPvql5dUNuavier-8JwusdP-N6DMRA_oXIuUsV7WKychjiIAE3Ij8q6ukTohftnSha00sERqQojm6fondbn6segpCzW-Qa1iuv86WtArTCR-u3TYVussHNgmOhw7iUuhUd0WwOKvD7c57-FpFTThsatYHbW2pjXyUfzuaTfMU6MAD3V2xBRY3MoVTgKCVfoWyilz8VoTjpGOaYHcCdm9_F_lVkzGWo33duY5s5BESNOFz/p.png?fv_content=true&amp;size_mode=5"
					temp_src="https://previews.dropbox.com/p/thumb/AAfF0czY1iixR-hF5xYqcp_O0lekQj-O6YYIuBfsSs4150YDBz6ReXsftgrvAiYTmJwm4fvLI_yEM7MXVeXCdZ2eXkcp2KLGZd9PJwW2_gMXPvql5dUNuavier-8JwusdP-N6DMRA_oXIuUsV7WKychjiIAE3Ij8q6ukTohftnSha00sERqQojm6fondbn6segpCzW-Qa1iuv86WtArTCR-u3TYVussHNgmOhw7iUuhUd0WwOKvD7c57-FpFTThsatYHbW2pjXyUfzuaTfMU6MAD3V2xBRY3MoVTgKCVfoWyilz8VoTjpGOaYHcCdm9_F_lVkzGWo33duY5s5BESNOFz/p.png?fv_content=true&amp;size_mode=5" />&nbsp;
				&nbsp;<span style="color: #4d649b; font-size: 0.933rem; font-weight: 600;">Garantia de 12 meses com o
					Fabricante</span></div>
			<div class="reason"
				style="box-sizing: border-box; display: inline-block; padding: 15px; vertical-align: top; width: calc(20% - 4px);">
				<br /></div>
			&nbsp;
		</div>
		<div>
			<br style="font-size: 19.36px;" /></div>
	</h3>
	<div>
		<div class="reason"
			style="box-sizing: border-box; display: inline-block; padding: 15px; vertical-align: top; width: calc(20% - 4px);">
			<span style="font-size: xx-small;">
			</span></div>
	</div>

  • The ADM of the site and Blog was the same way, but when I run your code here, it’s the way I want it. D:

  • @Henriquemorelli try to put in CSS .why-trocafone_reasons { margin: 15px auto 0 !important;} I think with the ! Important should take the property

0

There is a lot to be optimized in this code, but here is the solution for what you are looking for:

Find this code snippet:

<div class="why-trocafone_reasons" style="box-sizing: border-box; color: #404040; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 16px; font-weight: 400; margin-top: 15px; width: 938px;">

And replace it with this:

 <div class="why-trocafone_reasons" style="box-sizing: border-box; color: #404040; font-family: Open Sans, sans-serif; font-size: 16px; font-weight: 400; margin: 15px auto 0; width: 938px; text-align: center;">

  • It replaces, but is even more misaligned.

  • Will if it’s not Cache problem?

  • No, he’s still the same! D:

  • I don’t know if you noticed, I also noticed at the beginning, you have a <div class="Reason"></div> empty (the last one), that is, without any data, which may cause the impression of misalignment, but in fact it is not misaligned, There’s only one div occupying space with no content inside it. Check there in your code and inform me...

0

First of all, inline css codes are not good practices, as well as hindering a lot in development and maintenance.

Try using in imgs: display: block; margin: 0 auto;

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.