当我在我的网站上缩小时，一切正常并保持固定在其中没有错误的地方，但是当我放大到我的计算机上100％标记以上时，我的一些内容不是＆＃39 ; t默认居中将向右移动，并将其与在其中固定的内容对齐。我试图通过很多方法来解决这个问题，但我从来没有把事情做好。
好的，这就是当我的网站缩小以及放大后会发生什么时发生的事情（请注意放大时照片和提供链接的图像是如何向右移动的）：http://res.cloudinary.com/dbssny2ox/image/upload/v1480700334/zoom_out_1_xvl0vx.jpg http://res.cloudinary.com/dbssny2ox/image/upload/v1480700334/zoom_in_1_syodzh.jpg
在我的网页的其他部分也会出现同样的情况，这些部分在我的代码中进行了评论......
这是我的代码：
/*This is the start of section 3 stylsheet. At first glance everything works fine
But I'll soon point out where my problems start...'*/
section.sec3{
background-color: #232323;
width:100%;
padding: 120px 0 10px 0;
}
.separador{
width: 150px;
height: 20px;
display: block;
margin: auto;
margin-top: 30px;
}
section.sec3 h4{
font-family: 'Playfair Display';
color: #FFF;
font-size: 40px;
text-align: center;
margin-top: -50px;
}
/*Okay what I've done with this property ".conteudo" was that when you zoom-out everything will stay locked in place, however it won't work when you zoom-in, in the browser above the 100% mark, and everything will move to the right instead of being aligned with the rest of my content*/
.conteudo
{
align-content: center;
}
div.conteudo{
width: 1500px;
margin: auto;
}
section.sec3 img.foto_perfil{
display: block;
float: left;
margin-left: 297px;
margin-right: 20px;
}
section.sec3 p{
margin-top: 50px;
color: #fff;
font-size: 20px;
font-family: 'Lato';
}
section.sec3 p.p_2_sec3{
font-weight: bold;
}
/**/
/*This part right here is just for reference and it works as intended, so just ignore it*/
section.sec3 img.oqueseifazer{
display: block;
margin: auto;
margin-top: 50px;
padding-left: 25px;
width: 930px;
height: 27px;
}
section.sec3 div.posicao_horizontal2{
text-align: center;
margin: auto;
margin-top: 50px;
}
section.sec3 div#img2{
display: inline-block;
}
section.sec3 div img.img1{
margin-right: 40px;
}
section.sec3 div img.img1{
margin-left: 28px;
}
section.sec3 div img.img3{
margin-left: 40px;
}
section.sec3 div img.img4{
margin-left: 40px;
}
/**/
/*Okay once again the same problem happens with my image that provides a link, wich moves to the right when you zoom-in above the 100% mark*/
.conteudo2
{
align-content: center;
}
div.conteudo2{
width: 1500px;
margin: auto;
}
section.sec3 img.linkpdf{
display: block;
margin-top: 50px;
margin-left: 297px;
width: 600px;
height: 85px;
margin-bottom: 50px;
}
/**/
/*Ignore this part, it's just for reference*/
section.sec4{
padding: 120px 0 400px 0;
background-color: #f7f5f5;
}
section.sec4 h5{
font-family: 'Playfair Display';
color: #000000;
font-size: 40px;
text-align: center;
margin-top: -50px;
}
section.sec4 div.posicao_horizontal2{
text-align: center;
margin: auto;
margin-top: 50px;
}
section.sec4 div#img3{
display: inline-block;
}
section.sec4 div img.img1{
width: 301px;
height: 741px;
}
section.sec4 div img.img2{
margin-left: 40px;
width: 301px;
height: 741px;
}
section.sec4 div img.img3{
margin-left: 40px;
width: 301px;
height: 741px;
}
section.sec4 img.pers_negocio{
display: block;
margin: auto;
margin-top: 50px;
width: 1022px;
height: 60px;
}
/*Again I resorted to use the "align-content" property, wich solved my problem when zooming out but won't work when zooming-in and once zoomed-in the whole thing will move to the right and won't stay aligned with the rest of the content*/
.conteudo3
{
align-content: center;
}
div.conteudo3{
width: 1500px;
margin: auto;
}
section.sec4 div.outros_elementos{
float: left;
margin-right: 10px;
}
section.sec4 div.negocios_extra{
float: left;
margin-left: 10px;
margin-top: 50px
}
section.sec4 div p.title_sec4{
text-transform: uppercase;
color: #ffa31a;
font-size: 22px;
margin-top: 50px;
font-weight: bold;
margin-right: 50px;
}
section.sec4 div p{
margin-top: 10px;
margin-left: 238px;
font-size: 18px;
font-family: 'DIN Alt', Fallback, sans-serif;
margin-right: 50px;
}
section.sec4 div#img4{
display: inline-block;
}
section.sec4 img.negocio_ilustracao{
margin-right: 20px;
width: 271px;
display: block;
height: 303px;
}
section.sec4 img.negocio_webdesign{
width: 271px;
display: block;
height: 303px;
}
/**/
/*This is last part where my problem happens in my website, this time I have a div containg onlly text and a button instead of images as the sections I've shown before, I am almost sure there is some property I should be using for my div's but I can't figure out what... */
/*same as before just ignore the begining of the section*/
section.sec5{
background-color: #fcb732;
background-image: url("images/az-subtle.png");
padding: 120px 0 290px 0;
}
section.sec5 h6{
font-family: 'Playfair Display';
color: #000000;
font-size: 40px;
text-align: center;
margin-top: -55px;
}
section.sec5 p.intro_contact{
margin-top: 30px;
font-size: 25px;
text-align: center;
}
/**/
/*Here starts the problem*/
section.sec5 h2{
font-family: 'Montserrat';
color: white;
text-transform: uppercase;
font-size: 22px;
}
section.sec5 p.par_contact{
margin-top: 15px;
font-family: 'Liberation Sans', Fallback, sans-serif;
font-weight: bold;
font-size: 18px;
}
section.sec5 p.email{
margin-top: 15px;
font-family: 'Liberation Sans', Fallback, sans-serif;
font-weight: bold;
font-size: 18px;
color: #563715;
text-decoration: underline;
}
section.sec5 div#wrapper{
margin-left: 290px;
margin-top: 30px;
}
/*I created conteudo 4 to reinforce the centering of sec5 but maybe it's better to remove it since when it is removed the whole thing will look the same (but will still have the same issue of the other sections) */
.conteudo4{
align-content: center;
}
div.conteudo4{
width: 1217px;
margin: auto;
}
section.sec5 div.inquerito_contactos{
float: left;
margin-right: 20px;
}
section.sec5 div.info_contactos{
float: left;
margin-left: 20px;
}
.button {
background-color: #563715;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-family: 'Montserrat';
text-transform: uppercase;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}<section class="sec3">
<h4> O Meu Trabalho </h4>
<img class="separador" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693261/separador_de_titulo_branco_s5kkqx.png">
<div class="conteudo">
<img class="foto_perfil" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693261/foto_perfil_hb5oao.jpg">
<p> Sempre tive o gosto em tornar as coisas que me rodeiam melhores. <br>
Desde que efetuei o meu curso de Profissional de Multimédia, já <br>
disponibilizei os meus serviços como: </p>
<p class="p_2_sec3"> + Estagiário em Leça de Palmeira na empresa "Wonder Dimension" 2 <br>
meses e uma semana;<br>
+ Técnico de Multimédia desde 2015 na empresa "Tecla Virtual" em Gaia. </p>
<p> Os meus projectos já permitiram facultar imagem corporativa a <br>
algumas empresas em inicialização e já conto com um reportório, embora <br>
ainda modesto, dos meus trabalhos onde já criei: logótipos, cartazes, <br>
flyers, capas, cartões de visita, banners...<br>
Quando não estou a trabalhar gosto de aprender a tocar guitarra, ver <br>
filmes, ler livros, ouvir musica, ficar informado e estar com a família. </p>
</div>
<!--Everything contained in this part works as intended since everything is centered and locked into place, I won't even put the images uploaded here since this part is just for reference-->
<img class="oqueseifazer" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480694125/sparador_o_que_sei_fazer_lkypxq.png">
<div class="posicao_horizontal2">
<div id="img2"> <img class="img1" src="images/ilustrator.png"> </div>
<div id="img2"> <img class="img2" src="images/photoshop.png"> </div>
<div id="img2"> <img class="img3" src="images/dreamweaver.png"> </div>
<div id="img2"> <img class="img4" src="images/flash.png"> </div>
</div>
<!---->
<!--Here is when things get messy again once you zoom in above the 100% mark in the browser-->
<div class="conteudo2">
<img class="linkpdf" usemap="#linkpdfmap" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693261/link_portfolio_tnpxws.png
">
<map name="linkpdfmap">
<area shape="rect" coords="255,35,302,84" href="portfolio/portfolio.pdf" target="_blank">
</map>
</div>
</section>
<!---->
<!--Ignore the beginning of this section since it's just for reference-->
<section class="sec4">
<h5> Propostas de Negocio </h5>
<img class="separador" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/separador_de_titulo_preto_co4ztz.png
">
<div class="posicao_horizontal2">
<div id="img3"> <img class="img1" src="images/oferta_de_negocio_1.png"> </div>
<div id="img3"> <img class="img2" src="images/oferta_de_negocio_2.png"> </div>
<div id="img3"> <img class="img3" src="images/oferta_de_negocio_3.png"> </div>
</div>
<img class="pers_negocio" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/personalize_o_seu_negocio_cmv8ia.png">
<!---->
<!--Once again this part works when you zoom out, but will move to the right once you zoom-in above the 100% mark-->
<div class="conteudo3">
<div class="outros_elementos">
<p class="title_sec4"> Precisa <br>
de outros elementos? </p>
<p> Contacte-nos e conheça os vários <br>
preços e outras soluções diversas. </p>
<p> Quer seja no complemento do seu <br>
pack ou á parte, a Multimedia <br>
House dispõe de um amplo serviço <br>
de design gráfico e webdesign que <br>
coloca ao seu dispor. </p>
</div>
<div class="negocios_extra">
<div id="img4"> <img class="negocio_ilustracao" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/negocio_ilustracao_design_d4s5fi.png"> </div>
<div id="img4"> <img class="negocio_webdesign" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/negocio_webdesign_fhe6nk.png"> </div>
</div>
</div>
</section>
<!---->
<!--Ignore the beginning since it's just for reference-->
<section class="sec5">
<h6> Vamos Trabalhar? </h6>
<img class="separador" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/separador_de_titulo_preto_co4ztz.png">
<p class="intro_contact"> Estou actualmente dísponível para projectos freelance.<br>
Se estiver interessado em trabalhar comigo, por favor entre em contacto através dos métodos<br>
abaixo referidos.</p>
<!---->
<div id="wrapper">
<div class="conteudo4">
<div class="inquerito_contactos">
<h2> Tem um projecto em mente ? </h2>
<p class="par_contact"> Tire um minuto do seu tempo e responda<br>
a um inquérito acerca do seu projecto.<br><br>
Após responder o inquérito, entrarei em<br>
contacto consigo o mais brevemente<br>
possível.<br>
</p>
<a target="_blank" href="typeform_multimedia_house.html" class="button"> Inquérito</a>
</div>
<div class="info_contactos">
<h2> Entre em contacto comigo !</h2>
<p class="par_contact"> Luís Henriques </p>
<p class="par_contact"> Vila Nova de Gaia | 4400-008 </p>
<p class="par_contact"> +351 915 974 285 </p>
<a href="mailto:luishenriques96@gmail.com"><p class="email"> luishenriques96@gmail.com </p></a>
</div>
</div>
</div>
</section>
答案 0 :(得分：0)
这是因为当您放大时，页面的行为就像您在较小的屏幕中查看它一样。您的媒体查询正在放大zoom_in_1。
答案 1 :(得分：0)
我认为你有两件事导致了这个问题。
.conteudo使容器宽1500px，.foto_perfil设置剩余边距为297px。当你放大那些太大而且它们离开屏幕时。
相反。将.conteudo的宽度更改为宽度：80％并从照片中删除左边距。
/*This is the start of section 3 stylsheet. At first glance everything works fine
But I'll soon point out where my problems start...'*/
section.sec3{
background-color: #232323;
width:100%;
padding: 120px 0 10px 0;
}
.separador{
width: 150px;
height: 20px;
display: block;
margin: auto;
margin-top: 30px;
}
section.sec3 h4{
font-family: 'Playfair Display';
color: #FFF;
font-size: 40px;
text-align: center;
margin-top: -50px;
}
/*Okay what I've done with this property ".conteudo" was that when you zoom-out everything will stay locked in place, however it won't work when you zoom-in, in the browser above the 100% mark, and everything will move to the right instead of being aligned with the rest of my content*/
.conteudo
{
align-content: center;
}
div.conteudo{
width: 80%;
margin: auto;
}
section.sec3 img.foto_perfil{
display: block;
float: left;
margin-right: 20px;
}
section.sec3 p{
margin-top: 50px;
color: #fff;
font-size: 20px;
font-family: 'Lato';
}
section.sec3 p.p_2_sec3{
font-weight: bold;
}
/**/
/*This part right here is just for reference and it works as intended, so just ignore it*/
section.sec3 img.oqueseifazer{
display: block;
margin: auto;
margin-top: 50px;
padding-left: 25px;
width: 930px;
height: 27px;
}
section.sec3 div.posicao_horizontal2{
text-align: center;
margin: auto;
margin-top: 50px;
}
section.sec3 div#img2{
display: inline-block;
}
section.sec3 div img.img1{
margin-right: 40px;
}
section.sec3 div img.img1{
margin-left: 28px;
}
section.sec3 div img.img3{
margin-left: 40px;
}
section.sec3 div img.img4{
margin-left: 40px;
}
/**/
/*Okay once again the same problem happens with my image that provides a link, wich moves to the right when you zoom-in above the 100% mark*/
.conteudo2
{
align-content: center;
}
div.conteudo2{
width: 1500px;
margin: auto;
}
section.sec3 img.linkpdf{
display: block;
margin-top: 50px;
margin-left: 297px;
width: 600px;
height: 85px;
margin-bottom: 50px;
}
/**/
/*Ignore this part, it's just for reference*/
section.sec4{
padding: 120px 0 400px 0;
}
section.sec4 h5{
font-family: 'Playfair Display';
color: #000000;
font-size: 40px;
text-align: center;
margin-top: -50px;
}
section.sec4 div.posicao_horizontal2{
text-align: center;
margin: auto;
margin-top: 50px;
}
section.sec4 div#img3{
display: inline-block;
}
section.sec4 div img.img1{
width: 301px;
height: 741px;
}
section.sec4 div img.img2{
margin-left: 40px;
width: 301px;
height: 741px;
}
section.sec4 div img.img3{
margin-left: 40px;
width: 301px;
height: 741px;
}
section.sec4 img.pers_negocio{
display: block;
margin: auto;
margin-top: 50px;
width: 1022px;
height: 60px;
}
/*Again I resorted to use the "align-content" property, wich solved my problem when zooming out but won't work when zooming-in and once zoomed-in the whole thing will move to the right and won't stay aligned with the rest of the content*/
.conteudo3
{
align-content: center;
}
div.conteudo3{
width: 1500px;
margin: auto;
}
section.sec4 div.outros_elementos{
float: left;
margin-right: 10px;
}
section.sec4 div.negocios_extra{
float: left;
margin-left: 10px;
margin-top: 50px
}
section.sec4 div p.title_sec4{
text-transform: uppercase;
color: #ffa31a;
font-size: 22px;
margin-top: 50px;
font-weight: bold;
margin-right: 50px;
}
section.sec4 div p{
margin-top: 10px;
margin-left: 238px;
font-size: 18px;
font-family: 'DIN Alt', Fallback, sans-serif;
margin-right: 50px;
}
section.sec4 div#img4{
display: inline-block;
}
section.sec4 img.negocio_ilustracao{
margin-right: 20px;
width: 271px;
display: block;
height: 303px;
}
section.sec4 img.negocio_webdesign{
width: 271px;
display: block;
height: 303px;
}
/**/
/*This is last part where my problem happens in my website, this time I have a div containg onlly text and a button instead of images as the sections I've shown before, I am almost sure there is some property I should be using for my div's but I can't figure out what... */
/*same as before just ignore the begining of the section*/
section.sec5{
background-color: #fcb732;
background-image: url("images/az-subtle.png");
padding: 120px 0 290px 0;
}
section.sec5 h6{
font-family: 'Playfair Display';
color: #000000;
font-size: 40px;
text-align: center;
margin-top: -55px;
}
section.sec5 p.intro_contact{
margin-top: 30px;
font-size: 25px;
text-align: center;
}
/**/
/*Here starts the problem*/
section.sec5 h2{
font-family: 'Montserrat';
color: white;
text-transform: uppercase;
font-size: 22px;
}
section.sec5 p.par_contact{
margin-top: 15px;
font-family: 'Liberation Sans', Fallback, sans-serif;
font-weight: bold;
font-size: 18px;
}
section.sec5 p.email{
margin-top: 15px;
font-family: 'Liberation Sans', Fallback, sans-serif;
font-weight: bold;
font-size: 18px;
color: #563715;
text-decoration: underline;
}
section.sec5 div#wrapper{
margin-left: 290px;
margin-top: 30px;
}
/*I created conteudo 4 to reinforce the centering of sec5 but maybe it's better to remove it since when it is removed the whole thing will look the same (but will still have the same issue of the other sections) */
.conteudo4{
align-content: center;
}
div.conteudo4{
width: 1217px;
margin: auto;
}
section.sec5 div.inquerito_contactos{
float: left;
margin-right: 20px;
}
section.sec5 div.info_contactos{
float: left;
margin-left: 20px;
}
.button {
background-color: #563715;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-family: 'Montserrat';
text-transform: uppercase;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}<section class="sec3">
<h4> O Meu Trabalho </h4>
<img class="separador" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693261/separador_de_titulo_branco_s5kkqx.png">
<div class="conteudo">
<img class="foto_perfil" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693261/foto_perfil_hb5oao.jpg">
<p> Sempre tive o gosto em tornar as coisas que me rodeiam melhores. <br>
Desde que efetuei o meu curso de Profissional de Multimédia, já <br>
disponibilizei os meus serviços como: </p>
<p class="p_2_sec3"> + Estagiário em Leça de Palmeira na empresa "Wonder Dimension" 2 <br>
meses e uma semana;<br>
+ Técnico de Multimédia desde 2015 na empresa "Tecla Virtual" em Gaia. </p>
<p> Os meus projectos já permitiram facultar imagem corporativa a <br>
algumas empresas em inicialização e já conto com um reportório, embora <br>
ainda modesto, dos meus trabalhos onde já criei: logótipos, cartazes, <br>
flyers, capas, cartões de visita, banners...<br>
Quando não estou a trabalhar gosto de aprender a tocar guitarra, ver <br>
filmes, ler livros, ouvir musica, ficar informado e estar com a família. </p>
</div>
<!--Everything contained in this part works as intended since everything is centered and locked into place, I won't even put the images uploaded here since this part is just for reference-->
<img class="oqueseifazer" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480694125/sparador_o_que_sei_fazer_lkypxq.png">
<div class="posicao_horizontal2">
<div id="img2"> <img class="img1" src="images/ilustrator.png"> </div>
<div id="img2"> <img class="img2" src="images/photoshop.png"> </div>
<div id="img2"> <img class="img3" src="images/dreamweaver.png"> </div>
<div id="img2"> <img class="img4" src="images/flash.png"> </div>
</div>
<!---->
<!--Here is when things get messy again once you zoom in above the 100% mark in the browser-->
<div class="conteudo2">
<img class="linkpdf" usemap="#linkpdfmap" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693261/link_portfolio_tnpxws.png
">
<map name="linkpdfmap">
<area shape="rect" coords="255,35,302,84" href="portfolio/portfolio.pdf" target="_blank">
</map>
</div>
</section>
<!---->
<!--Ignore the beginning of this section since it's just for reference-->
<section class="sec4">
<h5> Propostas de Negocio </h5>
<img class="separador" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/separador_de_titulo_preto_co4ztz.png
">
<div class="posicao_horizontal2">
<div id="img3"> <img class="img1" src="images/oferta_de_negocio_1.png"> </div>
<div id="img3"> <img class="img2" src="images/oferta_de_negocio_2.png"> </div>
<div id="img3"> <img class="img3" src="images/oferta_de_negocio_3.png"> </div>
</div>
<img class="pers_negocio" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/personalize_o_seu_negocio_cmv8ia.png">
<!---->
<!--Once again this part works when you zoom out, but will move to the right once you zoom-in above the 100% mark-->
<div class="conteudo3">
<div class="outros_elementos">
<p class="title_sec4"> Precisa <br>
de outros elementos? </p>
<p> Contacte-nos e conheça os vários <br>
preços e outras soluções diversas. </p>
<p> Quer seja no complemento do seu <br>
pack ou á parte, a Multimedia <br>
House dispõe de um amplo serviço <br>
de design gráfico e webdesign que <br>
coloca ao seu dispor. </p>
</div>
<div class="negocios_extra">
<div id="img4"> <img class="negocio_ilustracao" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/negocio_ilustracao_design_d4s5fi.png"> </div>
<div id="img4"> <img class="negocio_webdesign" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/negocio_webdesign_fhe6nk.png"> </div>
</div>
</div>
</section>
<!---->
<!--Ignore the beginning since it's just for reference-->
<section class="sec5">
<h6> Vamos Trabalhar? </h6>
<img class="separador" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/separador_de_titulo_preto_co4ztz.png">
<p class="intro_contact"> Estou actualmente dísponível para projectos freelance.<br>
Se estiver interessado em trabalhar comigo, por favor entre em contacto através dos métodos<br>
abaixo referidos.</p>
<!---->
<div id="wrapper">
<div class="conteudo4">
<div class="inquerito_contactos">
<h2> Tem um projecto em mente ? </h2>
<p class="par_contact"> Tire um minuto do seu tempo e responda<br>
a um inquérito acerca do seu projecto.<br><br>
Após responder o inquérito, entrarei em<br>
contacto consigo o mais brevemente<br>
possível.<br>
</p>
<a target="_blank" href="typeform_multimedia_house.html" class="button"> Inquérito</a>
</div>
<div class="info_contactos">
<h2> Entre em contacto comigo !</h2>
<p class="par_contact"> Luís Henriques </p>
<p class="par_contact"> Vila Nova de Gaia | 4400-008 </p>
<p class="par_contact"> +351 915 974 285 </p>
<a href="mailto:luishenriques96@gmail.com"><p class="email"> luishenriques96@gmail.com </p></a>
</div>
</div>
</div>
</section>