如何解决如何将超出身体边缘的部分水平对齐到中心？
我有一个想要水平对齐的部分，但这就是发生的情况：
我用标签“ *”对正文进行了编码，因此它的空白为0，填充为0。因此，我认为这不是问题，我尝试删除了这些clearfix，但也无法解决我的问题。所以我现在被困了，因为我不知道那是什么。我是这里的初学者，谢谢您的帮助。
PS：我忘了说它只有在我试图使其响应时才会发生。
这是我认为主要导致问题的两个部分的HTML：
<aside id="lateralBar" class="clearfix">
<h3>
Buscar
</h3>
<div id="search">
<form action="#">
<input type="text">
<input type="button" value="L" class="icon">
</form>
</div>
<h3>
Login
</h3>
<div id="login" class="lateralBox">
<form action="">
<label id="user" class="icon">U</label>
<input type="email">
<label id="password" class="icon">w</label>
<input type="password">
<input type="submit" value="Entrar">
<input type="reset" value="Limpiar">
<a href="#">Registrate aquí</a>
<a href="#">¿Has olvidado tu contraseña?</a>
</form>
</div>
<h3>
Redes sociales
</h3>
<div id="socialNetwork" class="lateralBox">
<div class="twitter">
<a href="#" class="icon">t</a>
<p class="overlay">
Twitter
</p>
</div>
<div class="facebook">
<a href="#" class="icon">f</a>
<p class="overlay">
Facebook
</p>
</div>
<div class="youtube">
<a href="#" class="icon">y</a>
<p class="overlay">
Youtube
</p>
</div>
</div>
<h3>
Patrocinadores
</h3>
<div id="sponsors" class="lateralBox">
</div>
</aside>
<!-- Fin aside -->
<!-- Inicio articulos -->
<section id="articles" class="clearfix">
<h2>Últimos artículos</h2>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,remaining essentially unchanged.
</p>
</article>
<article id="blog">
<a href="#">Ir al blog</a>
</article>
</section>
这是响应式的CSS：
@media (max-width: 660px) {
#banner h1 {
font-size: 25px;
}
#lateralBar {
float: none;
width: 100%;
margin: 0 auto;
min-height: auto;
margin-top: 20px;
}
#lateralBar input[type="text"]{
width: 93%;
}
#login input[type="email"],#login input[type="password"] {
width: 90%;
}
#articles {
float: none;
width: 100%;
margin: 0px auto;
min-height: auto;
margin-top: 20px;
}
更新：
这是上一个媒体查询：
@media (max-width: 925px) {
#articles {
width: 45%;
}
#articles .data {
margin-left: 20px;
margin-bottom: 20px;
}
和原始CSS：
/* ARTICLES */
#articles {
width: 860px;
}
#articles h2 {
display: block;
width: 98%;
height: 75px;
line-height: 75px;
text-align: center;
font-family: "BebasNeue";
font-size: 40px;
font-weight: normal;
letter-spacing: 2px;
background: url("../img/pxgray.png");
box-shadow: 0px 1px 0px #393d3f,1px 2px 0px #393d3f,2px 3px 0px #393d3f,3px 4px 0px #393d3f;
margin: 0 auto;
margin-top: 18px;
margin-left: 101px;
margin-bottom: 15px;
}
#articles article {
display: block;
width: 87.5%;
height: auto;
border: 1px solid #ccc;
margin: 40px auto;
margin-left: 101px;
padding: 10px;
font-family: "TrebuchetMS";
background: white;
color: black;
box-shadow: 1px 1px 2px #ddd;
}
#articles article h4 {
display: block;
font-size: 23px;
margin: 3px auto;
}
#articles article h4 a {
text-decoration: none;
color: #00538C;
}
#articles article h4 a:hover {
text-decoration: underline;
}
#articles .data {
float: right;
background: #393d3f;
color: white;
height: 30px;
line-height: 30px;
margin: -5px;
padding: 4px;
font-size: 13px;
border-radius: 0px 0px 0px 20px;
}
#articles .data span {
margin: 6px;
}
#articles article p {
margin: 10px auto;
font-size: 15px;
}
解决方法
我只是使用您提供的代码创建了一个代码段，即使仍然缺少某些样式，我想我也找到了您取消该对齐的原因。
最简单的答案是，在这些元素上设置了一些左边距。尝试从应用于margin-left: 101px;和#articles h2的样式中删除#articles article
以下是未对齐的代码段：
/* ARTICLES */
#articles {
width: 860px;
}
#articles h2 {
display: block;
width: 98%;
height: 75px;
line-height: 75px;
text-align: center;
font-family: "BebasNeue";
font-size: 40px;
font-weight: normal;
letter-spacing: 2px;
background: url("../img/pxgray.png");
box-shadow: 0px 1px 0px #393d3f,1px 2px 0px #393d3f,2px 3px 0px #393d3f,3px 4px 0px #393d3f;
margin: 0 auto;
margin-top: 18px;
margin-left: 101px;
margin-bottom: 15px;
}
#articles article {
display: block;
width: 87.5%;
height: auto;
border: 1px solid #ccc;
margin: 40px auto;
margin-left: 101px;
padding: 10px;
font-family: "TrebuchetMS";
background: white;
color: black;
box-shadow: 1px 1px 2px #ddd;
}
#articles article h4 {
display: block;
font-size: 23px;
margin: 3px auto;
}
#articles article h4 a {
text-decoration: none;
color: #00538C;
}
#articles article h4 a:hover {
text-decoration: underline;
}
#articles .data {
float: right;
background: #393d3f;
color: white;
height: 30px;
line-height: 30px;
margin: -5px;
padding: 4px;
font-size: 13px;
border-radius: 0px 0px 0px 20px;
}
#articles .data span {
margin: 6px;
}
#articles article p {
margin: 10px auto;
font-size: 15px;
}
@media (max-width: 925px) {
#articles {
width: 45%;
}
#articles .data {
margin-left: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 660px) {
#banner h1 {
font-size: 25px;
}
#lateralBar {
float: none;
width: 100%;
margin: 0 auto;
min-height: auto;
margin-top: 20px;
}
#lateralBar input[type="text"]{
width: 93%;
}
#login input[type="email"],#login input[type="password"] {
width: 90%;
}
#articles {
float: none;
width: 100%;
margin: 0px auto;
min-height: auto;
margin-top: 20px;
}<aside id="lateralBar" class="clearfix">
<h3>
Buscar
</h3>
<div id="search">
<form action="#">
<input type="text">
<input type="button" value="L" class="icon">
</form>
</div>
<h3>
Login
</h3>
<div id="login" class="lateralBox">
<form action="">
<label id="user" class="icon">U</label>
<input type="email">
<label id="password" class="icon">w</label>
<input type="password">
<input type="submit" value="Entrar">
<input type="reset" value="Limpiar">
<a href="#">Registrate aquí</a>
<a href="#">¿Has olvidado tu contraseña?</a>
</form>
</div>
<h3>
Redes sociales
</h3>
<div id="socialNetwork" class="lateralBox">
<div class="twitter">
<a href="#" class="icon">t</a>
<p class="overlay">
Twitter
</p>
</div>
<div class="facebook">
<a href="#" class="icon">f</a>
<p class="overlay">
Facebook
</p>
</div>
<div class="youtube">
<a href="#" class="icon">y</a>
<p class="overlay">
Youtube
</p>
</div>
</div>
<h3>
Patrocinadores
</h3>
<div id="sponsors" class="lateralBox">
</div>
</aside>
<!-- Fin aside -->
<!-- Inicio articulos -->
<section id="articles" class="clearfix">
<h2>Últimos artículos</h2>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,remaining essentially unchanged.
</p>
</article>
<article id="blog">
<a href="#">Ir al blog</a>
</article>
</section>
这是所有内容对齐的代码段（我从这些样式中删除了左边距）：
/* ARTICLES */
#articles {
width: 860px;
}
#articles h2 {
display: block;
width: 98%;
height: 75px;
line-height: 75px;
text-align: center;
font-family: "BebasNeue";
font-size: 40px;
font-weight: normal;
letter-spacing: 2px;
background: url("../img/pxgray.png");
box-shadow: 0px 1px 0px #393d3f,3px 4px 0px #393d3f;
margin: 0 auto;
margin-top: 18px;
margin-bottom: 15px;
}
#articles article {
display: block;
width: 87.5%;
height: auto;
border: 1px solid #ccc;
margin: 40px auto;
padding: 10px;
font-family: "TrebuchetMS";
background: white;
color: black;
box-shadow: 1px 1px 2px #ddd;
}
#articles article h4 {
display: block;
font-size: 23px;
margin: 3px auto;
}
#articles article h4 a {
text-decoration: none;
color: #00538C;
}
#articles article h4 a:hover {
text-decoration: underline;
}
#articles .data {
float: right;
background: #393d3f;
color: white;
height: 30px;
line-height: 30px;
margin: -5px;
padding: 4px;
font-size: 13px;
border-radius: 0px 0px 0px 20px;
}
#articles .data span {
margin: 6px;
}
#articles article p {
margin: 10px auto;
font-size: 15px;
}
@media (max-width: 925px) {
#articles {
width: 45%;
}
#articles .data {
margin-left: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 660px) {
#banner h1 {
font-size: 25px;
}
#lateralBar {
float: none;
width: 100%;
margin: 0 auto;
min-height: auto;
margin-top: 20px;
}
#lateralBar input[type="text"]{
width: 93%;
}
#login input[type="email"],remaining essentially unchanged.
</p>
</article>
<article id="blog">
<a href="#">Ir al blog</a>
</article>
</section>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。