如何在浏览器调整大小时使图像居中并使图形标记响应

问题描述：

我有一个数字标记，我想让它响应，并且我想在浏览器调整大小时将图形标记居中，我有下一个代码片段描述我的代码，请在这里给我一点帮助。感谢如何在浏览器调整大小时使图像居中并使图形标记响应

.mover2{ 
 
\t position:relative; 
 
\t left:-33%; 
 
\t top:-8%; 
 
\t width: 100%; 
 
\t height: 77%; 
 
\t display: block; 
 
} 
 

 
.arreglo2{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t display:block; 
 
} 
 

 
#mas2{ 
 
\t background: rgba(43,86,162,1.00); 
 
\t 
 
} 
 

 
figcaption.efectoimg2 p{ 
 
\t text-align: center; 
 
\t font-family: Arial; 
 
\t color:rgba(253,253,253,1.00); 
 
\t font-weight: bold; 
 
\t position:relative; 
 
\t bottom: 15px; 
 
\t font-size:100%; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 

 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/imagehover.css/1.0/css/imagehover.min.css"> 
 

 

 
<figure class="imghvr-push-up mover2"> 
 
    <img class="arreglo2" src="https://i.imgur.com/D4fiyHr.png"> 
 
    <figcaption class="efectoimg2" id="mas2"> 
 
    <p>Atención Al Usuario</p> 
 
    </figcaption> 
 
</figure>

当浏览器调整大小时，它可能会将图形标记与图像居中？ – Rafael

请任何帮助？ – Rafael

答

为了达到你的要求了，你需要使用媒体查询。您可以了解更多关于他们here

你必须把它添加到您的代码，当您查看它在不同的屏幕尺寸

@media only screen and (max-width : 1100px){ /* You can choose whichever width you want */ 
    .mover2{ 
    margin:auto; 
    left:inherit; 
    top:inherit; 
    float:none; 
    } 
}

这里，这将改变<figure>的风格是一个小提琴：https://jsfiddle.net/30ptcjyx/

如何在浏览器调整大小时使图像居中并使图形标记响应

相关推荐