将 <p></p> HTML 与图像居中对齐

Question

我有一篇网站文章，写在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>

Answer 1

嘿，将以下内容添加到您的 css：


.main__content {
    width: 100%;
}
.main__content p {
    margin-top: 1rem;
    font-size: 1rem;
    text-align: justify;
    font-weight: 400;
    width: 80%;
    margin: 0 auto;
}

它会将段落的宽度设置为与图片相同，自动边距会设置两边等边距

或者您可以将图像和段落添加到同一个容器中。如下所示，将不太容易出现样式损坏：

<div class="container">
  <img ...>
  <p>asdfsdfsdf</p>
</div>

风格：

div.container {
  width: 80%;
  margin: 0 auto;
}
div.container img {
  width: 100%;
}
div.container p {
  width: 100%;
}

Answer 2

试试这个

.main__content {
   margin: 0 auto;
}

Answer 3

使两个容器的宽度相同并使用 margin-left/right = "auto"。

#main__img {
    height: auto;
    width: 80%;
    display: block;

    margin-left:auto;
    margin-right: auto;
}

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

    width: 80%;
    margin-left:auto;
    margin-right: auto;
}

<div class="main__content">
<img id="main__img" src="https://upload.wikimedia.org/wikipedia/commons/0/08/Astronotus_ocellatus.jpg" />

<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>

Answer 4

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

图形用于将视觉元素与描述或相关文本进行整理，所有部分都可以设置样式。在这种情况下 - 它就像应用 text-align: center 到 figure 元素以及 margin: 0 auto 一样简单，使其在 page.to 中居中得到你想要的样式。

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>

将 <p></p> HTML 与图像居中对齐

Align <p></p> HTML center with an Image

html

javascript

css

jekyll