将 HTML中心与图片对齐

debugcn 发表于 Dev

特殊情况代理

我有一段用HTML编写的网站文章

如何与图像对齐（对齐居中）？

#main__img {
    text-align: center;
    height: 80%;
    width: 80%;
}

.main__content p {
    margin-top: 1rem;
    font-size: 1rem;
    text-align: justify;
    font-weight: 400;
}

<img id="#main__img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb3FlgJlyfSfAyDxdt6bGxrG4fOxz2sIEOog&usqp=CAU" />

<div class="main__content">
<p> Visualizing Abolition maps the suppression of the African slave trade by tracing nearly 31,000 records of correspondence exchanged between the British Foreign Office and British commissioners, ministers, naval officers, and representatives of foreign governments around the world over the course of the nineteenth century. It provides users with three resources. First, a database that lists the names of the senders, recipients, places of origin and destination, dates, as well as the subject of the letters when available. Second, essays exploring different topics related to the suppression of the traffic. Finally, a gallery of images that provides visual context for the information available on the website. These resources allow students and researchers to further understand the history of the suppression of the African slave trade and expand our knowledge of the largest coerced migration in history. </p>
</div>

加夫格里夫

正确的HTML工具是figure element-具有显示元素（通常是图像-但可以是任何东西）和figcaption，通常是图形元素的第一个或最后一个子元素。figcaption包含与图像有关的文本。

该图用于将视觉元素与描述或相关文本进行整理，并且所有部分都可以设置样式。在这种情况下-就像在text元素上应用text-align：center以及margin：0一样简单，它会自动在页面中居中。得到您想要的stylnig。

figure  {
    width: 80%;
    margin: 0 auto;
    text-align: center
}


figcaption {
    margin-top: 1rem;
    font-size: 1rem;
    text-align: justify;
    font-weight: 400;
}

<figure>
  <img id="#main__img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb3FlgJlyfSfAyDxdt6bGxrG4fOxz2sIEOog&usqp=CAU" />
  <figcaption>
    <p> Visualizing Abolition maps the suppression of the African slave trade by tracing nearly 31,000 records of correspondence exchanged between the British Foreign Office and British commissioners, ministers, naval officers, and representatives of foreign governments around the world over the course of the nineteenth century. It provides users with three resources. First, a database that lists the names of the senders, recipients, places of origin and destination, dates, as well as the subject of the letters when available. Second, essays exploring different topics related to the suppression of the traffic. Finally, a gallery of images that provides visual context for the information available on the website. These resources allow students and researchers to further understand the history of the suppression of the African slave trade and expand our knowledge of the largest coerced migration in history. </p>
  </figcaption>
<figure>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。