Html 如何使一个子对象以两个轴为中心，其他子对象围绕它？_Html_Css

Html 如何使一个子对象以两个轴为中心，其他子对象围绕它？

html css

Html 如何使一个子对象以两个轴为中心，其他子对象围绕它？,html,css,Html,Css,让我们看一个例子： .wrapper{ 宽度：100vw；高度：100vh；显示器：flex；柔性包装：包装；溢出-y：隐藏 } .你{ 位置：绝对位置；最高：50%；左：50%；转化：translateX（-50%）translateY（-50%）；字体大小：300% } .其他{ 利润率：0.10px } 你其他其他其他其他其他其他其他其他其他其他其他其他其他其他其他其他其他其他其他其他其他其他其他其他其他其他其他其

让我们看一个例子：

.wrapper{
宽度：100vw；
高度：100vh；
显示器：flex；
柔性包装：包装；
溢出-y：隐藏
}
.你{
位置：绝对位置；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
字体大小：300%
}
.其他{
利润率：0.10px
}


你
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他

使用

显示：网格

，您可以实现所需的效果：

<style>
.grid-container {
  display: grid;
  grid-template-columns:repeat(8,1fr) ;
  background-color: #2196F3;
  padding: 10px;
}
.others {

  padding: 20px;
  font-size: 12px;
  text-align: center;
}
.you{
    font-size: 82px;
    grid-area: 4 / 3 / 6 / 7;
     text-align: center;
}
</style>
</head>
<body>



<div class="grid-container">
  <div class="you">you</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>  
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>  
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>  
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>  
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>  
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>  
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>  
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>  
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>  
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>  
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>  
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
   <div class="others">others</div>
  <div class="others">others</div>  
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
  <div class="others">others</div>
</div>

</body>


.网格容器{
显示：网格；
网格模板列：重复（8,1fr）；
背景色：#2196F3；
填充：10px；
}
.其他{
填充：20px；
字体大小：12px；
文本对齐：居中；
}
.你{
字号：82px；
网格面积：4/3/6/7；
文本对齐：居中；
}
你
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他
其他

网格面积：4/3/6/7；这句话让“其他人”这个词围绕着“你”这个词，怎么说？通过使用列和行中的空格，如果有“其他”一词，您可以共享所需最终结果的屏幕截图吗？不，在不知道行高/元素宽度的情况下不可能。您可以使用网格，每个“其他”一词可以在一列中，“您”可以是一个合并区域。