Question

基本上，学徒容器需要在左边，然后在onClick之后打开的div需要居中（图像1中的黄色点缀）我注意到它在不同的显示器尺寸上看起来不同。

这里有两张我目前进展的图片，我点了一些容器，希望能帮到你们。

我希望一切都有道理。

这是HTML：

.body2 {
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: 1px dotted red;
}

.body3 {
  padding: 5px;
  text-align: center;
  display: flex;
  /* flex-direction: row; */
  /* align-items: center; */
  border: 2px dotted orange;
}

.body-flexstart {
  text-align: center;
  justify-content: center;
  display: flex;
  justify-self: flex-start;
  width: 400px;
  /* flex-direction: row; */
  /* flex-flow: row wrap; */
  /* justify-content: space-around; */
  /* align-items: flex-start; */
  /* border: 1px dotted green; */
}

.column1 {
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px dotted yellow;
}

<div class="body2">
  <div class="body-flexstart">
    <div class="column1">
      <div onclick="console.log('clicked')" id="button" class="test1">
        <h1 class="itemcomponenttextheader">Apprentice</h1>
        <h1 class="itemcomponenttextheader">1 - 75</h1>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th class="tableheader">Mats</th>
            <th class="tableheader">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/inv_enchant_duststrange.jpg"> Strange Dust</div>
            </td>
            <td class="professionheader3">150x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/soul-dust.png"> Soul Dust</div>
            </td>
            <td class="professionheader3">90x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/vision-dust.gif"> Vision Dust</div>
            </td>
            <td class="professionheader3">170x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/dream-dust.gif"> Dream Dust</div>
            </td>
            <td class="professionheader3">300x</td>
          </tr>
        </tbody>
      </table>
      <br>
      <div onclick="console.log('clicked')" id="button1" class="test1">
        <h1 class="itemcomponenttextheader">Apprentice</h1>
        <h1 class="itemcomponenttextheader">1 - 75</h1>
      </div>
      <table id="table1">
        <thead>
          <tr>
            <th class="tableheader">Mats</th>
            <th class="tableheader">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/inv_enchant_duststrange.jpg"> Strange Dust</div>
            </td>
            <td class="professionheader3">150x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/soul-dust.png"> Soul Dust</div>
            </td>
            <td class="professionheader3">90x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/vision-dust.gif"> Vision Dust</div>
            </td>
            <td class="professionheader3">170x</td>
          </tr>
        </tbody>
      </table>
      </div>
      </div>
      <div class="body3">
        <div class="box2" id="box">
          <p class="professionheader3">A</p>
        </div>
        <div class="box2" id="box1">
          <p class="professionheader3">B</p>
        </div>
      </div>
      </div>

Answer 1

将div class="body3">嵌入新div内并添加：

{ display: flex; justify-content: center; text-align: center; width: 100%;}

选中此jsfiddle

＆＃13;

.body2 {
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: 1px dotted red;
}

.body3 {
  padding: 5px;
  text-align: center;
  display: flex;
  /* flex-direction: row; */
  /* align-items: center; */
  border: 2px dotted orange;
}

.new--div {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.body-flexstart {
  text-align: center;
  justify-content: center;
  display: flex;
  justify-self: flex-start;
  width: 400px;
  /* flex-direction: row; */
  /* flex-flow: row wrap; */
  /* justify-content: space-around; */
  /* align-items: flex-start; */
  /* border: 1px dotted green; */
}

.column1 {
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px dotted yellow;
}

＆＃13;

<div class="body2">
  <div class="body-flexstart">
    <div class="column1">
      <div onclick="console.log('clicked')" id="button" class="test1">
        <h1 class="itemcomponenttextheader">Apprentice</h1>
        <h1 class="itemcomponenttextheader">1 - 75</h1>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th class="tableheader">Mats</th>
            <th class="tableheader">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/inv_enchant_duststrange.jpg"> Strange Dust</div>
            </td>
            <td class="professionheader3">150x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/soul-dust.png"> Soul Dust</div>
            </td>
            <td class="professionheader3">90x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/vision-dust.gif"> Vision Dust</div>
            </td>
            <td class="professionheader3">170x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/dream-dust.gif"> Dream Dust</div>
            </td>
            <td class="professionheader3">300x</td>
          </tr>
        </tbody>
      </table>
      <br>
      <div onclick="console.log('clicked')" id="button1" class="test1">
        <h1 class="itemcomponenttextheader">Apprentice</h1>
        <h1 class="itemcomponenttextheader">1 - 75</h1>
      </div>
      <table id="table1">
        <thead>
          <tr>
            <th class="tableheader">Mats</th>
            <th class="tableheader">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/inv_enchant_duststrange.jpg"> Strange Dust</div>
            </td>
            <td class="professionheader3">150x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/soul-dust.png"> Soul Dust</div>
            </td>
            <td class="professionheader3">90x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/vision-dust.gif"> Vision Dust</div>
            </td>
            <td class="professionheader3">170x</td>
          </tr>
        </tbody>
      </table>
      </div>
      </div>
      <div class="new--div">
        <div class="body3">
          <div class="box2" id="box">
            <p class="professionheader3">A</p>
          </div>
          <div class="box2" id="box1">
            <p class="professionheader3">B</p>
          </div>
        </div>
      </div>
      </div>

＆＃13;

HTML CSS FLEX问题，div没有正确居中

1 个答案: