Question

我有一个数字标记，我想让它具有响应性，我希望在浏览器调整大小时将图形标记居中，我有下一个描述我的代码的代码片段，请在这里给我一些帮助。感谢

.mover2{
	position:relative;
	left:-33%;
	top:-8%;
	width: 100%;
	height: 77%;
	display: block;
}

.arreglo2{
	width: 100%;
	height: 100%;
	display:block;
}

#mas2{
	background: rgba(43,86,162,1.00);
	
}

figcaption.efectoimg2 p{
	text-align: center;
	font-family: Arial;
	color:rgba(253,253,253,1.00);
	font-weight: bold;
	position:relative;
	bottom: 15px;
	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>

Answer 1

要实现您的要求，您需要使用媒体查询。您可以详细了解他们here

您必须将此添加到您的代码中，当您在不同的屏幕尺寸上查看时，这将改变<figure>的样式

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

这是一个小提琴：https://jsfiddle.net/30ptcjyx/

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

1 个答案: