Question

我有以下需要编辑的工作示例：

我希望红色正方形在桌子1和1之上居中对齐。 2。然后，我希望黑点垂直对齐（一个在订单顶部），但左边是红色正方形。实现这一目标的最佳方式是什么？

https://jsfiddle.net/Jaron787/2mv98mkp/6/

HTML

<div>
  <img src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
  <img src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
  <img src='http://www.clker.com/cliparts/U/D/B/J/j/R/red-square-th.png'>
</div>
<div id="lse" class="display">
  <div id="centertbl">
    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 1</b></td>
      </tr>
    </table>

    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 2</b></td>
      </tr>
    </table>
  </div>

  <input type="submit" class="button button1" name="submitButton" value="Button 1">
  <input type="submit" class="button button1" name="submitButton" value="Button 2">
  <input type="submit" class="button button1" name="submitButton" value="Button 3">
  <input type="submit" class="button button1" name="submitButton" value="Button 4">

</div>

CSS

.TSS {
  border: 1px solid #000000;
  float: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10.6px;
  font-style: normal;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
}

#centertbl {
  text-align: center;
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

Answer 1

此解决方案如何：https://jsfiddle.net/3ozmqhq8

我在点上添加了position: absolute，然后使用margin: 0 auto和display:block将广场居中。

如果您不想更改display，则可以向.cnt申请text-align:center，因为img是一个行元素，它将居中。< / p>

.TSS {
  border: 1px solid #000000;
  float: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10.6px;
  font-style: normal;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
}

.cnt {
  margin-bottom: 10px
}

#c1,
#c2 {
  position: absolute;
  top: 20px;
  left: 0
}

#c2 {
  left: 45px
}

#square {
  display: block;
  margin: 0 auto;
}

#centertbl {
  text-align: center;
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

<div class="cnt">
  <img id="c1" src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
  <img id="c2" src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
  <img id="square" src='http://www.clker.com/cliparts/U/D/B/J/j/R/red-square-th.png'>
</div>
<div id="lse" class="display">
  <div id="centertbl">
    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 1</b></td>
      </tr>
    </table>

    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 2</b></td>
      </tr>
    </table>
  </div>

  <input type="submit" class="button button1" name="submitButton" value="Button 1">
  <input type="submit" class="button button1" name="submitButton" value="Button 2">
  <input type="submit" class="button button1" name="submitButton" value="Button 3">
  <input type="submit" class="button button1" name="submitButton" value="Button 4">

</div>

试试这个： https://jsfiddle.net/3ozmqhq8/2/

如果你想让点居中，你可以将它们向右移动left #c1和#c2

Answer 2

如果它可以帮助您，可以尝试使用此代码：

<div class="images-area">
  <div class="black-circles">
      <img src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
      <img src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
  </div>
  <img class="red-square" src='http://www.clker.com/cliparts/U/D/B/J/j/R/red-square-th.png'>
</div>
<div id="lse" class="display">
  <div id="centertbl">
    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 1</b></td>
      </tr>
    </table>

    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 2</b></td>
      </tr>
    </table>
  </div>

  <input type="submit" class="button button1" name="submitButton" value="Button 1">
  <input type="submit" class="button button1" name="submitButton" value="Button 2">
  <input type="submit" class="button button1" name="submitButton" value="Button 3">
  <input type="submit" class="button button1" name="submitButton" value="Button 4">

</div>

<body>

Answer 3

.redsquare {
  display: block;
  position: relative;
  margin: auto;
  height: 140px;
  width: 100px;
}
.redsquare>img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.dots {
  position: absolute;
  display: block;
  left: -70px;
  width: 70px;
}
.TSS {
  border: 1px solid #000000;
  float: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10.6px;
  font-style: normal;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
}
#centertbl {
  text-align: center;
}
.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}

<div>
  <div class="redsquare">
    <div class="dots">
      <img src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
      <img src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
    </div>
    <img src='http://www.clker.com/cliparts/U/D/B/J/j/R/red-square-th.png'>
  </div>
</div>

<div id="lse" class="display">
  <div id="centertbl">
    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 1</b>
        </td>
      </tr>
    </table>

    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 2</b>
        </td>
      </tr>
    </table>
  </div>

  <input type="submit" class="button button1" name="submitButton" value="Button 1">
  <input type="submit" class="button button1" name="submitButton" value="Button 2">
  <input type="submit" class="button button1" name="submitButton" value="Button 3">
  <input type="submit" class="button button1" name="submitButton" value="Button 4">

</div>

HTML，CSS形状和按钮定位

3 个答案: