如何在文章中水平居中多个图像

Question

我正在试图弄清楚如何让文章中的图片水平居中。我已经尝试了几种不同的技术，但我没有运气。

我可以发布我有的CSS，如果它有用，但我从Dreamweaver模板开始，所以我很高兴从头开始在CSS上。

<article class="fluid gallery">
<h2 class="fluid showAreaH2 headingStyle">Edutech Personal del Portador</h2>
<figure class="fluid tiles zeroMargin_desktop zeroMargin_tablet"> <img src="images/mauricio.jpg" alt="Maricio"/>
  <figcaption class="textStyle">Mauricio y Rosalía Sánchez</figcaption>
</figure>
<figure class="fluid tiles"> <img src="images/guillermo.jpg" alt="Guillermo y Sarit"/>
  <figcaption class="textStyle">Guillermo y Sarit Llanos</figcaption>
</figure>

Answer 1

article.fluid.gallery {
  text-align: center;
}

Answer 2

（更改/编辑的答案）

将两个图像放入包装器中，并将内容放在那个中心：

<article class="fluid gallery">
    <h2 class="fluid showAreaH2 headingStyle">Edutech Personal del Portador</h2>
    <div class="wrapper1">
      <figure class="fluid tiles zeroMargin_desktop zeroMargin_tablet"> <img src="images/mauricio.jpg" alt="Maricio"/>
        <figcaption class="textStyle">Mauricio y Rosalía Sánchez</figcaption>
      </figure>
      <figure class="fluid tiles"> <img src="images/guillermo.jpg" alt="Guillermo y Sarit"/>
        <figcaption class="textStyle">Guillermo y Sarit Llanos</figcaption>
      </figure>
    </div>
    <!-- additional text? -->
</article>

CSS：

.wrapper1 {
  width: 100%;
  text-align: center;
}

Answer 3

Flexbox始终是一种选择。将display设置为flex和justify-content:center。可能需要旧浏览器的供应商前缀。

article {
  width:100%;
  display:flex;
  justify-content:center;
}
img {
  padding:1em;
}

<article>
  <img src="http://placehold.it/50x50">
  <img src="http://placehold.it/50x50">
</article>

Answer 4

我会将您想要的图片包裹在文档中，例如：

<?xml version="1.0" encoding="utf-8"?>
<DatePicker
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/date_picker_widget"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:datePickerMode="spinner"
    android:calendarViewShown="false">
</DatePicker>

并将此css添加到图形包装类：

<div class="figure-wrapper">
   <figure...> ...</figure>
   ...
</div>

然后，您可以根据需要对齐文本和其他组件

Answer 5

不确定这对你来说是多么容易实现，但不应该太难。

我的建议是为要水平居中的图像设置容器元素。然后将这些图像或其容器元素设置为display: inline-block;。

.gallery {
  text-align: center;
}
.img-container {
  display: inline-block;
}

<div class="gallery">
  <div class="img-container">
    <img src="http://placehold.it/100x50">
    <p>
      Caption
    </p>
  </div>
  <div class="img-container">
    <img src="http://placehold.it/100x50">
    <p>
      Caption
    </p>
  </div>
  <div class="img-container">
    <img src="http://placehold.it/100x50">
    <p>
      Caption
    </p>
  </div>
</div>

演示JSFiddle。

Answer 6

我同意Arathi Sreekumar，但您还需要将其添加到CSS中：

.figure-wrapper figure { display: inline-block; }

您也可以在.figure-wrapper figure标记中添加一些填充。