Question

描述我情况的图片：
enter image description here

目前情况如何：
enter image description here

**我有一个问题，就是在Express Yourself页面下将文本与图像对齐。

我已经尝试根据包装器的总宽度将段落设置为彼此相同的宽度。图片能够成功浮动;与图像并排。然而，应该与其相应的图像集中对齐的文本不会移位。

当我对文本进行实验时，要么所有文本都保留在左侧，要么集中处理;一个接一个，在彼此之下。我如何能够将相应的段落彼此并排移动，与其图像居中对齐？**

<Style>

#wrapper {
width:970px;
margin-left:auto;
margin-right:auto;  /* Most crucial thing to align the whole page plus margin-left */
}

#section1 img, #section2 img, #section3 img, #section4 img {
max-width:100%;
float:left;
display:block;
padding-bottom:30px;
}

#section1, #section2, #section3, #section4 {
font:Arial, Helvetica, sans-serif;
font-size:
text-align:center;
}

p.title {
width:323px;

}



hgroup {
font:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:bold;
padding-top:24px; /*To give space inbetween image and Text*/
width:323px;
}

</style>


<body>

<div id="wrapper">

<section id="section1">
<img src="img/showcase_project1.jpg">
    <img src="img/showcase_project2.jpg">
    <img src="img/showcase_project3.jpg">

    <hgroup>PAVÉ</hgroup>
    <p class="title">Illustration Design<br>Avina Tan</p>

    <hgroup>REBRANDING HAW PAR VILLA</hgroup>
    <p>Branding Design<br>Tan Chin Hwee</p>

    <hgroup>DREAMS</hgroup>
    <p class="title">Photography<br>Jessie Lam</p>
</section>

<section id="section2">
<img src="img/showcase_project4.jpg">
    <img src="img/showcase_project5.jpg">
    <img src="img/showcase_project6.jpg">

    <hgroup>PAPER NEVER FORGETS</hgroup>
    <p class="title">Graphic Design<br>Janelle Qua</p>

    <hgroup>‘O THAT TWISTED STORY</hgroup>
    <p class="title">Illustration Design<br>Jennifer Soon</p>

    <hgroup>HOMEBREW</hgroup>
    <p class="title">Branding Design<br>Fiona Lim</p>
</section>

<section id="section3">
<img src="img/showcase_project7.jpg">
    <img src="img/showcase_project8.jpg">
    <img src="img/showcase_project9.jpg">

    <hgroup>FIVE (MUSIC IN PRINT)</hgroup>
    <p class="title">Photography<br>Jonathan Liu</p>

    <hgroup>PRECIOUS</hgroup>
    <p class="title">Graphic and Editorial Design <br>Tzeng Li Syuan</p>

    <hgroup>26 HOURS</hgroup>
    <p class="title">Digital Design<br>Evelyn Chew & Rachall Tay</p>
</section>

<section id="section4">
<img src="img/showcase_project10.jpg">
    <img src="img/showcase_project11.jpg">

  <hgroup>JOY IN A CUP</hgroup>
    <p class="title">Digital Design<br>Chua Pei En & Lim Si Hui</p>

    <hgroup>AZURE AIRLINE APP</hgroup>
    <p class="title">Digital Design<br>Tulasi & Lock Phutthaphon</p>
</section>

</div>

</body>

Answer 1

此处存在一些问题，但为了解决您的问题，我建议将每个图像与其关联的<hgroup>和<p class="title">分组，方法是将它们包装在<div>或一些东西，然后浮动包装。这样的事情：http://jsfiddle.net/Lp32mtkm/。

您的版本无法正常工作的原因是默认情况下<p>标记和<hgroup>标记是块元素（可以使用css属性display显式设置），这意味着它们会自动开始一个新行，即使前一行有空格也是如此。 <img>标签默认情况下是内联元素，这意味着它们将彼此相邻排列。

编辑：错过了关于文本居中的部分。您所要做的就是将text-align:center放在包装元素上，如下所示：http://jsfiddle.net/Lp32mtkm/1/。

无法将段落与各自的图像对齐。（连续3段）

1 个答案:

无法将段落与各自的图像对齐。 （连续3段）

1 个答案:

无法将段落与各自的图像对齐。（连续3段）