Question

目前我正在使用rails app，这是我的贡献者页面，我想要图像下面的每个成员的名字居中。任何帮助都将得到帮助。

以下是我的member.html.erb文件

<h1>CONTRIBUTORS</h1>

 <div id="contributors_image">
  <%= image_tag "one.jpg" %>
  <%= image_tag "two.jpg" %>
  <%= image_tag "three.jpg" %>
  <%= image_tag "four.jpg" %> 
  <%= image_tag "five.jpg" %> 
  <%= image_tag "six.jpg" %> 
  <%= image_tag "seven.jpg" %> 
 </div>

和application.css.scss的部分是，

#contributors_image {
        float: centre;
        margin-left: 3em;
        img {
            width: 200px;
            height: 200px;
            border-radius: 8.35em;
        }
    }

Answer 1

根本没有float: center;。你可以这样做。

将图片设为display: inline-block;。
将text-align: center;放入容器。
此外，最好使用Sentence案例并使用text-transform: uppercase;设置样式。

您的最终代码应如下所示：

h1 {
  text-transform: uppercase;
}
#contributors_image {
  margin-left: 3em;
  text-align: center;
}
#contributors_image img {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  display: inline-block;
}

<h1>Contributors</h1>

<div id="contributors_image">
  <img src="//placehold.it/100?text=Image+1" alt="Image 1" />
  <img src="//placehold.it/100?text=Image+2" alt="Image 2" />
  <img src="//placehold.it/100?text=Image+3" alt="Image 3" />
  <img src="//placehold.it/100?text=Image+4" alt="Image 4" />
  <img src="//placehold.it/100?text=Image+5" alt="Image 5" />
  <img src="//placehold.it/100?text=Image+6" alt="Image 6" />
  <img src="//placehold.it/100?text=Image+7" alt="Image 7" />
</div>

预览

它现在可以像预期的那样精美地展示它。

您的代码中未添加任何名称。如果你想这样做，你可以用另一个<figure>和<figcaption>包裹它并以这种方式（这是正确的方式）：

h1 { text-transform: uppercase; } #contributors_image { margin-left: 3em; text-align: center; } #contributors_image figure { width: 200px; height: 200px; display: inline-block; } #contributors_image img { display: block; border-radius: 100%; max-width: 100%; }

<h1>Contributors</h1> <div id="contributors_image"> <figure> <img src="//placehold.it/200?text=Image+1" alt="Image 1" /> <figcaption>Contributor 1</figcaption> </figure> <figure> <img src="//placehold.it/200?text=Image+2" alt="Image 2" /> <figcaption>Contributor 2</figcaption> </figure> <figure> <img src="//placehold.it/200?text=Image+3" alt="Image 3" /> <figcaption>Contributor 3</figcaption> </figure> <figure> <img src="//placehold.it/200?text=Image+4" alt="Image 4" /> <figcaption>Contributor 4</figcaption> </figure> <figure> <img src="//placehold.it/200?text=Image+5" alt="Image 5" /> <figcaption>Contributor 5</figcaption> </figure> <figure> <img src="//placehold.it/200?text=Image+6" alt="Image 6" /> <figcaption>Contributor 6</figcaption> </figure> <figure> <img src="//placehold.it/200?text=Image+7" alt="Image 7" /> <figcaption>Contributor 7</figcaption> </figure> </div>

预览

它现在可以像预期的那样精美地展示它。

Answer 2

float：center不是有效的css属性。您只需要在div或容器上封装包含名称的图像和标签，并为该容器提供text-align：center;

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

img{
    border-radius:100%;
    width:200px;
    float:left;
    margin: 0 20px;
}

编译完成后，HTML将如下所示

<h1>CONTRIBUTORS</h1>

<div id="contributors_image">
    <div class="img-container">
        <img src="http://fineartamerica.com/images/artworkgallerylogos/yosemite-national-park-science-source-images-1404150568.jpg" />
        <h4>John Doe</h4>
    </div>  
    <div class="img-container">
        <img src="http://fineartamerica.com/images/artworkgallerylogos/yosemite-national-park-science-source-images-1404150568.jpg" />
        <h4>John Doe</h4>
    </div>  
    <div class="img-container">
        <img src="http://fineartamerica.com/images/artworkgallerylogos/yosemite-national-park-science-source-images-1404150568.jpg" />
        <h4>John Doe</h4>
    </div>  
    <div class="img-container">
        <img src="http://fineartamerica.com/images/artworkgallerylogos/yosemite-national-park-science-source-images-1404150568.jpg" />
        <h4>John Doe</h4>
    </div>  
    <div class="img-container">
        <img src="http://fineartamerica.com/images/artworkgallerylogos/yosemite-national-park-science-source-images-1404150568.jpg" />
        <h4>John Doe</h4>
    </div>  
    <div class="img-container">
        <img src="http://fineartamerica.com/images/artworkgallerylogos/yosemite-national-park-science-source-images-1404150568.jpg" />
        <h4>John Doe</h4>
    </div>  
</div>

请点击demo获取指导，但您必须将其修改为将根据您的代码编译的特定标记

对齐图像下方的文字

2 个答案: