Сейчас я работаю в приложении rails, введите описание изображения здесь это моя страница соавторов, я хочу, чтобы имена каждого члена были под изображениями по центру. Любая помощь будет приложена.

Ниже мой файл 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;
        }
    }
-1
Bikal 27 Ноя 2016 в 17:34

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>

Следуйте демонстрации , чтобы получить руководство, но вам придется изменить его. к вашей конкретной разметке, которая будет скомпилирована из вашего кода

0
LOTUSMS 27 Ноя 2016 в 14:51

Нет вообще никакого float: center;. Вы можете сделать это вместо этого.

  • Сделайте изображения display: inline-block;.
  • Поместите text-align: center; в контейнер.
  • Кроме того, рекомендуется использовать регистр в предложении и стилизовать его с помощью 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>

< Сильный > Предварительный просмотр

preview

Теперь он прекрасно показывает это, как и ожидалось.


Вы не добавили никаких имен в свой код. Если вы хотите это сделать, вы можете обернуть его другими <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>

< Сильный > Предварительный просмотр

preview

Теперь он прекрасно показывает это, как и ожидалось.

1
Praveen Kumar Purushothaman 27 Ноя 2016 в 14:49