Question

我想制作这样的2行图像（来自5张图片）：

图像图像
图像图像

但是如何将第一行居中？我的结果如下：

图像图像
图像图像

<table border="0">

  <tr>
  
    <td>
      <figure style="margin: 0;">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>

    <td>
      <figure style="margin:0">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>

  </tr>

  <tr>

    <td>
      <figure style="margin: 0;">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>
    
    <td>
      <figure style="margin:0">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>
    
    <td>
      <figure style="margin: 0">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>
    
  </tr>
  
</table>

@echo off

:: Run this script with elevation
call :RequestAdminElevation "%~dpfs0" %* || goto:eof

set "hostspath=C:\Program Files (x86)\ICW\rsyncd.conf"
set "new_hostspath=C:\Program Files (x86)\ICW\rsyncd.temp"

:: Add the first lines to the new file
echo uid=0> %new_hostspath%
echo gid=0>> %new_hostspath%

:: copy your original .conf file to the new one
type %hostspath% >> %new_hostspath%

:: add the last lines to the new file
echo [data] >> %new_hostspath%
echo path = /cygdrive/d/My documents >> %new_hostspath%
echo read only = false >> %new_hostspath%
echo transfer logging = yes >> %new_hostspath%
echo [mail] >> %new_hostspath%
echo path = /cygdrive/d/mail >> %new_hostspath%
echo read only = false >> %new_hostspath%
echo transfer logging = yes >> %new_hostspath%

:: copy new file over the old file
type %new_hostspath% > %hostspath

pause &goto:eof

[here you paste the RequestAdminElevation function code]

this

Answer 1

使用现有标记，您可以将display的{{1}}更改为tr并使用flex

＆＃13;

justify-content: center;

＆＃13;

figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

figure:hover img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  position: relative;
  height: auto;
  display: block;
  z-index: 999;
  border: 1px solid #ffffff;
  background-color: #ffffff;
}

tr {
  display: flex;
  justify-content: center;
}

＆＃13;

Answer 2

.row {
  display: table;
  margin: 10px auto;
}

.row img {
  display:inline-block;
}

<div class="row">
  <img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100">
  <img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100">
</div>

<div class="row">
  <img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100">
  <img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100">
  <img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100">
</div>

Answer 3

您可以删除table和center代码并使用一个div。

然后，flex-layout使其变得更加容易：请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/

/* use the flex model */
div {
  display:flex;
  flex-wrap:wrap;/* allow wrapping on multiple rows*/
  justify-content:center;/* horizontal centering */
}

figure:nth-child(1),
figure:nth-child(2)
{
  order:-1;/* reorder the first 2 image ahead anything else */
}
/* add an element to push to next line the last elements */
div:before {
  content:'';
  width:100%;/* use a full row */
}

<div>
  <figure>
  <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
</figure>
<figure>
  <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
</figure>
<figure>
  <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
</figure>
<figure>
  <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
</figure>
<figure>
  <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
</figure>
</div>

demo to play with

Answer 4

Michael Coker有一个正确的答案，特别是如果你的问题使用表格是合适的。但是，如果您只是使用表格进行布局/对齐，那通常被认为是不好的做法（请参阅此SO帖子Why not use tables for layout in HTML?）

我以为我会提供一种不涉及表格的替代解决方案。

dbWriteTable

figure {
  display: inline-block;
  border: 1px solid cadetblue;
}

.wrapper {
  text-align:center;
}

2行图像（奇数个图像）

4 个答案: