Bikal Bikal - 6 days ago 5
CSS Question

Align text beneath images

Currently I'm working in rails app,
https://i.stack.imgur.com/aSr4P.png this is my contributers page, I want name of each members beneath the images on centered. Any help will be apperciated.


Below is my member.html.erb file


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



and my part of application.css.scss is,


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

Answer

float:centre is not a valid css property. All you need is to encapsulate the image and label that contains the name in it's on div or container and give that container a text-align: center;

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

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

HTML would look like this after compiled

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

Follow the demo for guidance but you'll have to modify it to your specific markup that will be compiled from your code

Comments