Question

我试图将文本将其放在此处放在<canvas>内，以便用户知道放置文件的位置。

通常情况下，人们使用display: table-cell然后使用vertical-align来破解垂直居中。就我而言，我有两个浮动到对面方向的画布图像。当我使用table-cell策略时，浮动被打破了。

另一个问题是，当<canvas>用户将文件放入其中时，canvas_container大小会发生变化。因此，居中的div必须动态居中。

所以我尝试了绝对定位。这是标记，float: left/right必须有<div class="canvas_container left"> <div class="canvas_wrap"> <canvas id="original" width="150" height="150"></canvas> <div class="dropzone first">Drop it here!</div> </div> </div>

  /** Every canvas can only get half of the screen */
   div.canvas_container {
     max-width: 50%;
     width: 50%;
   }
   /**The inner canvas container should center the other elements **/
   div.canvas_container div.canvas_wrap {
     position: relative;
     height: 100%;
     display: inline-block;
     /*vertical-align: middle; */
   }

   div.canvas_container canvas {
      display: block;
      /*position:absolute;*/
      top:0px;
      left: 0px;
   }

   /**This div should be centered**/
   div.canvas_container div.first {
     display: block;
     margin: auto;
     position: absolute;
     top: 0; left: 0; bottom: 0; right: 0;
   }

这是我的CSS：

top: 0; bottom: 0

为什么margin: auto导致垂直居中？为什么canvas { max-width: 100%; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QAkwCTAJP5tiLoAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3goVFxMCXx/9uAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAKUlEQVQY02OcPHnyfwY04OTkhC7EwMRAJBhAhYxXr17F8My+ffuGpGcA6xQJSXdOZ30AAAAASUVORK5CYII=); } div#canvases { width: 100%; padding: 0px; } /** Every canvas can only get half of the screen */ div.canvas_container { max-width: 50%; width: 50%; } /**The inner canvas container should center the other elements **/ div.canvas_container div.canvas_wrap { position: relative; height: 100%; display: inline-block; /*vertical-align: middle; */ } div.canvas_container canvas { display: block; /*position:absolute;*/ top:0px; left: 0px; } /**This div should be centered**/ div.canvas_container div.first { display: block; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } div.canvas_container.left { float: left; } div.canvas_container.right { float: right; text-align: right; } div.canvas_container.right div.canvas_wrap { margin-left: 0px; }无法将div水平居中？

＆＃13;

     <div id="canvases">
       <div class="canvas_container left">
         <div class="canvas_wrap">
           <canvas id="original" width="150" height="150"></canvas>
           <div class="dropzone first">Drop it here!</div>
         </div>
       </div>
       <div class="canvas_container right">
         <div class="canvas_wrap">
           <canvas id="result" width="150" height="150"></canvas>
         </div>
       </div>
     </div>

＆＃13;

{{1}}

＆＃13;

Answer 1

这应该适合你：

canvas {
  max-width: 100%;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QAkwCTAJP5tiLoAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3goVFxMCXx/9uAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAKUlEQVQY02OcPHnyfwY04OTkhC7EwMRAJBhAhYxXr17F8My+ffuGpGcA6xQJSXdOZ30AAAAASUVORK5CYII=);
}
div#canvases {
  width: 100%;
  padding: 0px;
}
/** Every canvas can only get half of the screen */

div.canvas_container {
  max-width: 50%;
  width: 50%;
}
/**The inner canvas container should center the other elements **/

div.canvas_container div.canvas_wrap {
  position: relative;
  height: 100%;
  display: inline-block;
  /*vertical-align: middle; */
}
div.canvas_container canvas {
  display: block;
  /*position:absolute;*/
  top: 0px;
  left: 0px;
}
/**This div should be centered**/

div.canvas_container div.first {
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
div.canvas_container.left {
  float: left;
}
div.canvas_container.right {
  float: right;
  text-align: right;
}
div.canvas_container.right div.canvas_wrap {
  margin-left: 0px;
}
.first p {
  display: table-cell;
  height: 150px;
  vertical-align: middle;
  width: 150px;
  text-align: center;
}

.first p:before {
  content: '';
  position: absolute;
  display: block;
  background: rgb(241, 241, 241);
  z-index: -1;
  margin-top: -5px;
  border-radius: 30px;
  border: 1px solid rgb(156, 156, 156);
  text-align: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  background-color: rgb(252, 252, 252);
  width: 115px;
  height: 30px;
}

<div id="canvases">
  <div class="canvas_container left">
    <div class="canvas_wrap">
      <canvas id="original" width="150" height="150"></canvas>
      <div class="dropzone first">
        <p>Drop it here!</p>
      </div>
    </div>
  </div>
  <div class="canvas_container right">
    <div class="canvas_wrap">
      <canvas id="result" width="150" height="150"></canvas>
    </div>
  </div>
</div>

首先，我使用Drop it here!标记包装了文本<p></p>，然后将以下样式应用于<p>标记：

.first p {
      display: table-cell;
      height: 150px;
      vertical-align: middle;
      width: 150px;
      text-align: center;
}

<强>更新

要在Drop it here!文字后面应用背景，我将.first p:before设为这样的样式：

.first p:before {
  content: '';
  position: absolute;
  display: block;
  background: rgb(241, 241, 241);
  z-index: -1;
  margin-top: -5px;
  border-radius: 30px;
  border: 1px solid rgb(156, 156, 156);
  text-align: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  background-color: rgb(252, 252, 252);
  width: 115px;
  height: 30px;
}

在具有浮动的元素中水平和垂直居中文本

1 个答案: