Centering text underneath bootstrap image design

Question

Centering text underneath bootstrap image design

After trying various methods, I still couldn't get the text to display directly below my images in the center. Below is the code I attempted:

<div class="our_partners">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <ul>
                        <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url( $image1, 'full' )); ?>" alt=""></a>
                           <span>High Speed Wifi</span> </li>
                        <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url( $image2, 'full' )); ?>" alt=""></a>
                          <span>Latest Av Technology</span>

                        </li>
                        <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url( $image3, 'full' )); ?>" alt=""></a>
                          <span>Online Booking</span>


                        </li>
                        <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url( $image4, 'full' )); ?>" alt=""></a>
  <span>Concierge Service</span>


                        </li>
                        <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url( $image5, 'full' )); ?>" alt=""></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

If you want to view the result, click on the following link:

To see it live, visit this website and scroll down to services:

html css twitter-bootstrap

Answer 1

Answer №1

Displaying images

.our_partners ul li a img {
    padding: 29px 0;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Change margin-right from 15px to 0;

.our_partners ul li a {
    margin-right: 0;
}

for list items

.our_partners ul li {
    display: inline-block;
    margin: 0px 5px;
}

Additionally,

span {

        display: block;
        text-align: center;
    }

Answer 2

Displaying images

.our_partners ul li a img {
    padding: 29px 0;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Change margin-right from 15px to 0;

.our_partners ul li a {
    margin-right: 0;
}

for list items

.our_partners ul li {
    display: inline-block;
    margin: 0px 5px;
}

Additionally,

span {

        display: block;
        text-align: center;
    }

Answer 3

Answer №2

.company_clients ul li a {
    display: block;
    margin: 0 auto;
}

.company_clients ul li a img {
    padding: 12px 0;
    max-width: 100%;
    max-height: 100%;
}
.company_clients ul li a {
    width:220px;
    text-align:center;
}

Copy and paste this code into your custom stylesheet to ensure proper center alignment.

Answer 4

.company_clients ul li a {
    display: block;
    margin: 0 auto;
}

.company_clients ul li a img {
    padding: 12px 0;
    max-width: 100%;
    max-height: 100%;
}
.company_clients ul li a {
    width:220px;
    text-align:center;
}

Copy and paste this code into your custom stylesheet to ensure proper center alignment.

Answer 5

Answer №3

For optimal spacing between list elements, it is recommended to use the margin-right: 15px property on the list element rather than the anchor element. This approach makes more logical sense as you are separating the list items and not the anchors.

To further enhance this layout, ensure that the span element occupies 100% of the available width and aligns its content in the center.

.our_partners li {
    margin-right: 15px;
}
.our_partners a li span {
    text-align: center;
    display: inline-block;
    width: 100%;
}

Lastly, remember to remove any existing margin settings from the anchor element:

.our_partners ul li a {
    margin-right: 15px;    // <- delete this line
}

Answer 6

For optimal spacing between list elements, it is recommended to use the margin-right: 15px property on the list element rather than the anchor element. This approach makes more logical sense as you are separating the list items and not the anchors.

To further enhance this layout, ensure that the span element occupies 100% of the available width and aligns its content in the center.

.our_partners li {
    margin-right: 15px;
}
.our_partners a li span {
    text-align: center;
    display: inline-block;
    width: 100%;
}

Lastly, remember to remove any existing margin settings from the anchor element:

.our_partners ul li a {
    margin-right: 15px;    // <- delete this line
}

Answer 7

Answer №4

To make it easier, you can simply use <br/> like this:

<ul>
  <li>
    <a href="#"><img src="..." alt=""></a><br/>
    <span>High Speed Wifi</span>
  </li>
  (...)

For a cleaner approach, consider treating one of the elements as a block. By default, a, img, and span tags are inline:

<ul>
  <li>
    <a href="#" style="display:block;"><img src="..." alt=""></a>
    <span>High Speed Wifi</span>
  </li>
  (...)

You can also externalize the CSS style by using a class. Another option is to wrap the linked image in a block span:

# foo.css:
span.span-block { display: block; }
...
# 42.html
<span class="span-block"><a ...><img .../></a></span>
...

Answer 8

To make it easier, you can simply use <br/> like this:

<ul>
  <li>
    <a href="#"><img src="..." alt=""></a><br/>
    <span>High Speed Wifi</span>
  </li>
  (...)

For a cleaner approach, consider treating one of the elements as a block. By default, a, img, and span tags are inline:

<ul>
  <li>
    <a href="#" style="display:block;"><img src="..." alt=""></a>
    <span>High Speed Wifi</span>
  </li>
  (...)

You can also externalize the CSS style by using a class. Another option is to wrap the linked image in a block span:

# foo.css:
span.span-block { display: block; }
...
# 42.html
<span class="span-block"><a ...><img .../></a></span>
...

Answer 9

Answer №5

Insert the text within the <a></a> tag in this way:

<li>
    <a href="#"><img src="...s2-3.png" alt="">
        <span style="display:block;">High Speed Wifi</span>
    </a>
</li>

MODIFY To make sure all images are properly aligned, you can position the last image as follows:

<li>
    <a href="#"><img src="...cons-2.png" alt="">
        <span style="display:block;">&nbsp;</span>
    </a>
</li>

In addition, it is recommended to apply a specific style to the <span> element in your css stylesheet to minimize repetition.

Answer 10

Insert the text within the <a></a> tag in this way:

<li>
    <a href="#"><img src="...s2-3.png" alt="">
        <span style="display:block;">High Speed Wifi</span>
    </a>
</li>

MODIFY To make sure all images are properly aligned, you can position the last image as follows:

<li>
    <a href="#"><img src="...cons-2.png" alt="">
        <span style="display:block;">&nbsp;</span>
    </a>
</li>

In addition, it is recommended to apply a specific style to the <span> element in your css stylesheet to minimize repetition.

Centering text underneath bootstrap image design

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Issue with jQuery Cycle causing images not to load in IE all at once, leading to blinking

Customize Your Wordpress Category Title with a Background Image

Prevent iPhone from automatically changing phone numbers to grey text color

What is the best way to display data from an Excel spreadsheet on my website?

Using JavaScript and HTML to show the current month, date, and year on a webpage

What is the best way to arrange an unordered list in a horizontal layout?

I am unable to access the Xml data using VBA's `selectsinglenode` function as it is returning nothing

Gather data from various HTML elements with JavaScript when submitting a form

What is the best way to ensure a floated image matches the height of its parent container?

Simultaneous Activation of Hover Effects on Multiple Elements

Add a flexible element to a container without disrupting the alignment of the other

problem with transmitting information through $.ajax

Maximizing spacing for element alignment using space-evenly and :after

What is the best way to use jQuery to emphasize specific choices within an HTML select element?

How can I programmatically adjust the center of a Google Maps v3 map?

JavaScript: The functionality of calling functions through buttons ceases to function once the page is updated without reloading

Python Selenium for Element Detection

Arrange a pair of div containers side by side on the webpage without the need to alter the existing

Creating a simple bootstrap code for developing plugins in Wordpress

Is there a way to maintain scroll position on a dynamically refreshing div?