Place text directly below the images for proper alignment

Question

Place text directly below the images for proper alignment

In my current rails app, I am working on the contributors page. Each member's name should be displayed centered beneath their respective images. Any assistance with this would be greatly appreciated.

Below is a snippet from 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>

Here is a portion of my application.css.scss file:

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

html css ruby-on-rails

Answer 1

Answer №1

There is no float: center; in the code provided. Instead, consider the following approach:

Set the images to have display: inline-block;.
Add text-align: center; to the container.
For consistent style, use Sentence case and apply text-transform: uppercase;.

The updated code should appear as follows:

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

https://i.sstatic.net/ppzg1.png

The code now displays as expected with the specified styling.

If you wish to include names in your code, encapsulate it within a <figure> and <figcaption> like so:

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>
  <!-- Include additional contributor figures here -->
</div>

Preview

https://i.sstatic.net/MlBnU.png

The updated code now appropriately showcases the images along with their respective contributors' names.

Answer 2

There is no float: center; in the code provided. Instead, consider the following approach:

Set the images to have display: inline-block;.
Add text-align: center; to the container.
For consistent style, use Sentence case and apply text-transform: uppercase;.

The updated code should appear as follows:

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

https://i.sstatic.net/ppzg1.png

The code now displays as expected with the specified styling.

If you wish to include names in your code, encapsulate it within a <figure> and <figcaption> like so:

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>
  <!-- Include additional contributor figures here -->
</div>

Preview

https://i.sstatic.net/MlBnU.png

The updated code now appropriately showcases the images along with their respective contributors' names.

Answer 3

Answer №2

The property float:centre is not a valid CSS property. To center the image and label containing the name, you need to encapsulate them in their own 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;
}

After compiling, your HTML would look like this:

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

For guidance, refer to the demo, but make sure to modify it according to your specific markup for compilation from your code.

Answer 4

The property float:centre is not a valid CSS property. To center the image and label containing the name, you need to encapsulate them in their own 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;
}

After compiling, your HTML would look like this:

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

For guidance, refer to the demo, but make sure to modify it according to your specific markup for compilation from your code.

Place text directly below the images for proper alignment

Answer №1

Answer №2

Similar questions

What is the best way to display a div based on a keyword match?

Utilize JavaScript to apply the CSS -moz-transition

Tips for avoiding a 500 GET error due to an empty request during page loading

Activate the jQuery function multiple times

using jquery to fill in fields in a table form

Creating consistent row spacing between Bootstrap 5 rows that matches the spacing in Bootstrap 4

Creating a full-screen background with an rgba overlay using CSS

Moving through divisions that share a common class name using jquery

What is the process to enable mandatory validation after a change in input in Angular 4?

Modify the background color of checkboxes without including any text labels

How to reference color variables from code behind in ASP and use them in CSS files

When scrolling, a new page loads seamlessly

What is the significance of an empty href attribute in the HTML <base> tag?

Exploring elements in Javascript

Fatal error in CodeIgniter occurring while invoking CSS less functions

Taking out the z-index from the transition code

The addition and deletion of classes can sometimes lead to disruptions in the DOM

Is there a way to retrieve the Location header of a 302 redirection URL using PHP?

Determine the variable height of a div containing dynamic content in order to execute a transform

Angular: The Ultimate Guide to Reloading a Specific Section of HTML (Form/Div/Table)