Question

我正在尝试在网站上排列无序的想象列表。

我已经尝试过使用'text-align：center;'，margins（虽然可以，但是看起来很草率）

#nav{
  margin-left:44%;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
  background-color: transparent;
  height: 40px;
  margin-bottom: 100px;
}

#nav li a {
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
    background-color: transparent;
    float: left;
  text-align: center;
  display: inline;
}

<div id="nav">
  <ul>
      <li>
         <a href="https://discord.gg/dpdnG5z"><img src='./public/images/discord.png' style="height:40px;border:0;"></a>
      </li>
      <li>
         <a href="https://www.youtube.com/channel/UCktDAXUifElDiBzAiomHfFQ"><img src='./public/images/youtube.png' style="height:40px;"></a>
      </li>
      <li>
         <a href="https://www.twitch.tv/kingoftheskies09"><img src='./public/images/twitch.png' style="height:40px;border:0;"></a>
      </li>
  </ul>
</div>

与手动设置的边距一样，该列表无法正确居中。

Answer 1

我建议使用弹性盒来处理此类问题。片段中的第一个示例显示使用弹性框居中。第二个示例显示将无序列表居中。

要使无序列表居中，我已将包含元素（#nav）的左右边距设置为auto。为了使列表居中，您将需要知道列表的确切宽度。我计算出每张图片的尺寸为3 x 40像素，每张图片的间距为20像素，总计180像素。

在处理无序时遇到的一个常见问题是列表的左侧带有默认填充。为了实现完美居中，我删除了列表样式的项目符号，并删除了填充。

import numpy as np
import matplotlib.pyplot as plt

x = [0, 1, 0, 0, 4.3, 3, 599]

# Compute the DTFT at a sufficiently large number of points using the explicit formula
N = 2048
f = np.linspace(0, 0.5, N)
dtft = np.zeros(len(f), dtype=np.complex128)
for n in range(0,len(x)):
  dtft += x[n] * np.exp(-1j*2*np.pi*f*n)

# Compute the FFT without NFFT argument (NFFT defaults to the length of the input)
y1 = np.fft.rfft(x)
f1 = np.fft.rfftfreq(len(x))

# Compute the FFT with NFFT argument
N2 = 8
y2 = np.fft.rfft(x,N2)
f2 = np.fft.rfftfreq(N2)

# Plot results
plt.figure(1)
plt.subplot(2,1,1)
plt.plot(f, np.abs(dtft), label='DTFT')
plt.plot(f1, np.abs(y1), 'C1x', label='FFT N=7')
plt.plot(f2, np.abs(y2), 'C2s', label='FFT N=8')
plt.title('Magnitude')
plt.legend(loc='upper right')

plt.subplot(2,1,2)
plt.plot(f, np.angle(dtft), label='DTFT')
plt.plot(f1, np.angle(y1), 'C1x', label='FFT N=7')
plt.plot(f2, np.angle(y2), 'C2s', label='FFT N=8')
plt.title('Phase')
plt.legend(loc='upper right')

plt.show()

.flex {
  display: flex;
  justify-content: center;
}

.flex>div {
  margin-right: 20px;
}

#nav {
  margin: 0 auto;
  width: 180px;
}

#nav>ul {
  padding-left: 0px;
}

#nav li {
  list-style-type: none;
  text-decoration: none;
  float: left;
  margin-right: 20px;
}

如何居中无序图像列表？

1 个答案: