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:

https://i.sstatic.net/3ILWS.png

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

Evolution of the material through a fresh new slide

Calibrating height using CSS

How to position the play button in the center using Material UI and Flexbox

Trouble with displaying autocomplete options for ajax requests

Showing nested arrays in API data using Angular

Issue with WordPress navigation menu bug

Use selenium to locate an element based on its CSS selector

Unique CSS content for varied designs

What is the most effective method for transferring data to a concealed input field?

Disappearance of external page upon refreshing - jquery mobile

What is the best way to implement a sub-menu using jQuery?

Tips for navigating a user to a different HTML page using JSP code?

Can this be achieved using CSS alone, without needing JavaScript?

Manipulating elements with JavaScript to remove them, while ensuring that the empty space is automatically filled

Send information from Node.js to the webpage and populate designated elements (search by either ID or class) on the webpage

How can I prevent dataTable resizing?

Shadow effect is present under every cell in the table row

What is the best way to populate an HTML array using my AWK script?

Do css classes consistently provide a solution to issues with style overrides?

Using CSS to design a table-like structure with rows that span multiple columns